@extends('admin.layouts.admin')
@section('content')
<style>
    .modal-body {
        overflow: visible;
    }
</style>

<div class="page-content">
    <div class="card">
        <div class="card-body">
            <button class="btn btn-primary mb-3" id="add"><i class="bi bi-plus fw-bold"></i> Add</button>

            <div class="table-responsive">
                <table class="table table-bordered w-100" id="table">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Name</th>
                            <th>Address</th>
                            <th>Province</th>
                            <th>Regencie</th>
                            <th>District</th>
                            <th>Village</th>
                            <th>Fax</th>
                            <th>Email</th>
                            <th>Phone Number</th>
                            <th>Contact Person</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>

        </div>
    </div>
</div>

<div class="modal fade" id="wilayahModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog">
        <form id="form">
            @csrf
            <input type="hidden" name="id" id="id">

            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Company Form</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    <div class="mb-3">
                        <label for="name" class="form-label">Company Name</label>
                        <input type="text" name="name" id="name" class="form-control text-uppercase">
                    </div>

                    <input type="hidden" name="level" id="level" value="{{ $levelCompany->id }}">

                    <div class="mb-3">
                        <label for="address" class="form-label">Address</label>
                        <textarea name="address" id="address" class="form-control" rows="3"></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="provinsi" class="form-label">Province</label>
                        <select id="provinsi" name="prov_id" data-type="province" class="form-control"></select>
                    </div>

                    <div class="mb-3">
                        <label for="kabupaten" class="form-label">Regency / City</label>
                        <select id="kabupaten" name="reg_id" data-type="regency" class="form-control"></select>
                    </div>

                    <div class="mb-3">
                        <label for="kecamatan" class="form-label">District</label>
                        <select id="kecamatan" name="dist_id" data-type="district" class="form-control"></select>
                    </div>

                    <div class="mb-3">
                        <label for="village" class="form-label">Village / Subdistrict</label>
                        <select id="village" name="vill_id" data-type="village" class="form-control"></select>
                    </div>

                    <div class="mb-3">
                        <label for="fax">Fax</label>
                        <input type="text" name="fav" id="fav" class="form-control text-uppercase">
                    </div>

                    <div class="mb-3">
                        <label for="email">Email</label>
                        <input type="email" name="email" id="email" class="form-control">
                    </div>

                    <div class="mb-3">
                        <label for="telp">Phone Number</label>
                        <input type="text" name="telp" id="telp" class="form-control text-uppercase">
                    </div>

                    <div class="mb-3">
                        <label for="contact_person">Contact Person</label>
                        <input type="text" name="contact_person" id="contact_person" class="form-control">
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>

            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
<script>
$(function(){

    const perPage = 10;

    function setSelect2Value($el, id, text){
        if(!id) return;
        let option = new Option(text, id, true, true);
        $el.append(option).trigger('change', {skipChild:true});
    }

    function initSelect2($el, type, parentSelector=null, modalSelector='#wilayahModal', selectedId=null){
        $(modalSelector).on('keydown', '.select2-search__field', function(e){
            if(e.key === 'Enter') e.preventDefault();
        });    

        $el.select2({
            width: '100%',
            //dropdownParent: $(modalSelector),
            dropdownParent: $el.closest('.modal-content'),
            dropdownPosition: 'below',
            minimumInputLength: 0,
            allowClear: true,
            placeholder: 'Choose Option',
            ajax: {
                url: "{{ route('admin.wilayah.search') }}",
                dataType: 'json',
                delay: 250,
                data: params => {
                    let parentId = parentSelector ? $(parentSelector).val() : '';
                    return { type, kode: parentId, id: selectedId, q: params.term||'', page: params.page||1 }
                },
                processResults: (data) => {
                    let results = data.results.map(r=>({id:r.id,text:r.name}));
                    return { results, pagination:{ more: results.length>=perPage && data.pagination.more } }
                },
                cache: true
            }
        }).on('select2:open', ()=>{
            const sf = document.querySelector('.select2-container--open .select2-search__field');
            if(sf) sf.focus();
        });

        if(selectedId){
            $.getJSON("{{ url('admin/wilayah/detail') }}", { type, id: selectedId }, data=>{
                setSelect2Value($('#provinsi'), data.province_id, data.province_name);
                setSelect2Value($('#kabupaten'), data.regency_id, data.regency_name);
                setSelect2Value($('#kecamatan'), data.district_id, data.district_name);
                setSelect2Value($('#village'), data.village_id, data.village_name);
            });
        }
    }

    function clearChilds(...$els){
        $els.forEach($el => $el.val(null).empty().trigger('change', {skipChild:true}));
    }

    $('#wilayahModal').on('shown.bs.modal', function(){

        initSelect2($('#provinsi'), 'province');
        initSelect2($('#kabupaten'), 'regency', '#provinsi');
        initSelect2($('#kecamatan'), 'district', '#kabupaten');
        initSelect2($('#village'), 'village', '#kecamatan');
    });

    $('#wilayahModal').on('hidden.bs.modal', function(){
        clearChilds($('#provinsi'), $('#kabupaten'), $('#kecamatan'), $('#village'));
        $('#provinsi, #kabupaten, #kecamatan, #village').val(null).trigger('change');
    });

    $('#provinsi, #kabupaten, #kecamatan, #village').on('change', function(e, extra){
            if(extra && extra.skipChild) return;

            const $el = $(this);
            const type = $el.data('type');
            const id = $el.val();
            if(!id) return;

            $.getJSON("{{ url('admin/wilayah/detail') }}", { type, id }, data=>{
                setSelect2Value($('#provinsi'), data.province_id, data.province_name);
                setSelect2Value($('#kabupaten'), data.regency_id, data.regency_name);
                setSelect2Value($('#kecamatan'), data.district_id, data.district_name);
                setSelect2Value($('#village'), data.village_id, data.village_name);
            });

            switch(type){
                case 'province': clearChilds($('#kabupaten'), $('#kecamatan'), $('#village')); break;
                case 'regency':  clearChilds($('#kecamatan'), $('#village')); break;
                case 'district': clearChilds($('#village')); break;
            }
        });

        let table = $('#table').DataTable({
            processing:true,
            serverSide:true,
            responsive: true,
            autowidth: false,
            ordering: false,
            ajax:'{{ url("admin/company") }}',
            columns:[
                {
                    data:null,
                    orderable:false,
                    searchable:false,
                    render:(data,type,row,meta)=>{
                        return meta.row + meta.settings._iDisplayStart + 1
                    }
                },
                {data:'name'},
                {
                    data: 'address',
                    render: function(data){
                        return `<div style="width:150px; white-space:normal; word-break:break-word;">
                                    ${data ?? ''}
                                </div>`;
                    }
                },
                {data:'pname'},
                {data:'rname'},
                {data:'dname'},
                {data:'vname'},
                {data:'fax'},
                {data:'email'},
                {data:'telp'},
                {data:'contact_person'},
                {data:'action', orderable:false, searchable:false}
            ]
        });

        $('#add').click(function(){
            $('#form')[0].reset();
            $('#id').val('');
            $('#wilayahModal').modal('show');
        });

        $('#form').on('submit', function(e){
            e.preventDefault();
            ajaxFormSubmitAuto(this, function(res){
                if (res.success) {
                    $('#wilayahModal').modal('hide');
                    table.ajax.reload();
                }
            });
        });

        $(document).on('click', '.edit', function() {
            $.get('{{ url("admin/company") }}/' + $(this).data('id'), function(res) {
                $('#id').val(res.id);
                $('#name').val(res.name);
                $('#address').val(res.address);
                $('#level').val(res.level);
                $('#fav').val(res.fax);
                $('#email').val(res.email);
                $('#telp').val(res.telp);
                $('#contact_person').val(res.contact_person);
                $('#provinsi').html('<option value="' + res.prov_id + '">' + res.pname + '</option>').val(res.prov_id);
                $('#kabupaten').html('<option value="' + res.reg_id + '">' + res.rname + '</option>').val(res.reg_id);
                $('#kecamatan').html('<option value="' + res.dist_id + '">' + res.dname + '</option>').val(res.dist_id);
                $('#village').html('<option value="' + res.vill_id + '">' + res.vname + '</option>').val(res.vill_id);
                $('#wilayahModal').modal('show');
            });
        });

        $(document).on('click', '.delete', function(){
            let id = $(this).data('id');

            showConfirm('Yakin ingin menghapus data ini?', function(){
                $.ajax({
                    url: `{{ url("admin/company") }}/${id}`,
                    type: 'DELETE',
                    data: { _token: '{{ csrf_token() }}' },
                    success: function() {
                        table.ajax.reload();
                        showAlert('Data berhasil dihapus', 'success');
                    },
                    error: function() {
                        showAlert('Gagal menghapus data', 'error');
                    }
                });
            });
        });

    });

</script>
@endpush