// require('./bootstrap');
require('jquery-confirm/js/jquery-confirm');
// window.Vue = require('vue');

//Vue.component('example-component', require('./components/ExampleComponent.vue'));

// const app = new Vue({
//     el: '#app'
// });

/**
 * チェックボックス全選・解除
 */
$('#checkbox_all').on('ifChecked ifUnchecked', function (event) {
    if (event.type == 'ifChecked') {
        $('input.checkbox:not(:disabled)').iCheck('check');
    } else {
        $('input.checkbox:not(:disabled)').iCheck('uncheck');
    }
});

/**
 * 削除ボタン押下時の確認ダイアログ
 */
$('#delete').on('click', function () {
    $.confirm({
        title: '確認ダイアログ。',
        content: '！※※※このレコードは他のテーブルから参照されている可能性があります。削除の際は十分注意してください。\n' +
            '※※※　チェックボックスにて選択したレコードを削除してよろしいでしょうか？はい/いいえ',
        buttons: {
            ok: {
                text: "はい",
                btnClass: 'btn-primary',
                keys: ['enter'],
                action: function () {
                    $("#form_delete").submit();
                }
            },
            いいえ: function () {}
        }
    });
});

/**
 * CSVインポート確認ダイアログ
 */
$('#import_csv').on('click', function () {
    var action = $(this).attr('action'),
        token = $('meta[name="csrf-token"]').attr('content');
    $.confirm({
        title: 'インポート確認ダイアログ。',
        content: '' +
            '<form action="' + action + '" class="formName" id="form_import" method="post" enctype="multipart/form-data">' +
            '<input type="hidden" name="_token" value="' + token + '" />' +
            '<p>！データをインポートします。既存のデータは全て削除します。継続してよろしいですか？　はい/いいえ。</p>' +
            '<div class="form-group">' +
            '<input type="file" name="file" accept=".csv" />' +
            '</div>' +
            '</form>',
        buttons: {
            formSubmit: {
                text: 'はい',
                btnClass: 'btn-blue',
                action: function () {
                    $("#form_import").submit();
                }
            },
            いいえ: function () {}
        }
    });
});

/**
 * CSV出力確認ダイアログ
 */
$('#export_csv').on('click', function () {
    var action = $(this).attr('action'),
        user_id = $('#user_id').val(),
        member_id = $('#member_id').val(),
        user_tag_serial = $('#user_tag_serial').val(),
        user_phonetic = $('#user_phonetic').val(),
        phone = $('#phone').val(),
        crime = $('#crime').val(),
        sort = $('#sort').val(),
        sort_type = $('#sort_type').val();
    $.confirm({
        title: '確認ダイアログ。',
        content: '！CSVファイルを出力します。よろしいですか？はい/いいえ',
        buttons: {
            ok: {
                text: "はい",
                btnClass: 'btn-primary',
                keys: ['enter'],
                action: function () {
                    window.location.href = action +
                        '?user_id=' + user_id +
                        '&member_id=' + member_id +
                        '&user_tag_serial=' + user_tag_serial +
                        '&user_phonetic=' + user_phonetic +
                        '&phone=' + phone +
                        '&crime=' + crime +
                        '&sort=' + sort +
                        '&sort_type=' + sort_type +
                        '&isExport=1';
                }
            },
            いいえ: function () {}
        }
    });
});

/**
 * ソート処理（▲▼アイコン付き）
 */
$(document).on('click', '.rc-table thead th.sorting, .rc-table thead th.sorting_asc, .rc-table thead th.sorting_desc', function (e) {
    e.preventDefault();

    var $header = $(this);
    var form = document.getElementById('list-form');
    if (!form) {
        return;
    }

    var sortKey = $header.attr('sort');
    if (!sortKey) {
        return;
    }

    var wasAsc = $header.hasClass('sorting_asc');
    var sortType = wasAsc ? 'desc' : 'asc';

    $('.rc-table thead th.sorting, .rc-table thead th.sorting_asc, .rc-table thead th.sorting_desc')
        .removeClass('sorting_asc sorting_desc');
    $header.addClass(wasAsc ? 'sorting_desc' : 'sorting_asc');

    form.querySelector('input[name="sort"]').value = sortKey;
    form.querySelector('input[name="sort_type"]').value = sortType;

    var params = new URLSearchParams(new FormData(form));
    params.delete('page');

    var action = form.getAttribute('action') || window.location.pathname;
    var base = action.split('?')[0];
    var query = params.toString();

    window.location.href = query ? base + '?' + query : base;
});

/**
 * 日付ピッカー初期化
 */
$('.date').datepicker({
    language: "ja",
    format: "yyyy/mm/dd"
});

/**
 * 利用者選択時に電話番号を自動入力
 */
$('#select_user').on('change', function () {
    var mobile = $('option:selected', this).attr('mobile'),
        homePhone = $('option:selected', this).attr('homePhone');
    $('#mobile').val(mobile);
    $('#homephone').val(homePhone);
});
$('#select_user').trigger('change');

/**
 * 登録ボタン押下時の確認
 */
$('.register').on('click', function (e) {
    e.preventDefault();
    $.confirm({
        title: '確認ダイアログ。',
        content: '登録してよろしいですか？はい/いいえ',
        buttons: {
            ok: {
                text: "はい",
                btnClass: 'btn-primary',
                keys: ['enter'],
                action: function () {
                    $("form").submit();
                }
            },
            いいえ: function () {}
        }
    });
});

/**
 * 編集画面：登録処理
 */
$('#register_edit').on('click', function (e) {
    e.preventDefault();
    $.confirm({
        title: '確認ダイアログ',
        content: '登録してよろしいですか？',
        buttons: {
            ok: {
                text: "はい",
                btnClass: 'btn-primary',
                action: function () {
                    $("#form_edit").submit();
                }
            },
            いいえ: function () {}
        }
    });
});

/**
 * 編集画面：削除処理
 */
$('#delete_edit').on('click', function (e) {
    e.preventDefault();
    $.confirm({
        title: '削除ダイアログ',
        content: '！削除してよろしいですか？',
        buttons: {
            ok: {
                text: "はい",
                btnClass: 'btn-primary',
                action: function () {
                    $("#form_delete").submit();
                }
            },
            いいえ: function () {}
        }
    });
});

$(function () {
  // ▼ 「アップロード」ボタンを押すと、ファイル選択ダイアログを開く
  $(document).on('click', '.upload-file', function () {
    $(this).siblings('input[type=file]').click();
  });

  // ▼ ファイル選択後、自動でAJAXアップロード処理を行う
  $(document).on('change', 'input[name=company_image_file]', function () {
    const file = this.files[0];
    if (!file) return;

    const formData = new FormData();
    formData.append('company_image_file', file);
    formData.append('_token', $('input[name=_token]').val());

    $.ajax({
      url: '/inv_setting/upload', // ルート：アップロード先
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function (res) {
        // 成功時：ファイル名を表示・hidden項目に反映
        $('input[name=company_image_path]').val(res.path);
        $('.filename').text(res.file_name);

        // プレビューを更新
        const previewHtml = `<div class="mt-2">
            <img src="/storage/${res.path}" alt="社判画像" 
                 style="max-height:100px; border:1px solid #ccc; padding:3px;">
        </div>`;
        $('.uploaded-file').after(previewHtml);

        alert('アップロードが完了しました。');
      },
      error: function (xhr) {
        alert('アップロードに失敗しました。');
      }
    });
  });

  // ▼ 削除ボタン（✕）をクリックしたらファイル情報をクリア
  $(document).on('click', '.delete-file', function () {
    $('input[name=company_image_path]').val('');
    $('.filename').text('');
    $('img[alt="社判画像"]').remove();
  });
});

