@extends('layouts/base_view')
@section('title')
{!! $variables['header_routes'] !!}

<style>
/* Custom styling for native multi-select */
#dcs {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: 0.375rem;
}

#dcs option {
    padding: 8px 12px;
    border-radius: 3px;
    margin-bottom: 2px;
    cursor: pointer;
}

#dcs option:hover {
    background-color: #e9ecef;
}

#dcs option:checked {
    background: linear-gradient(#ffc107, #ffc107);
    color: #000;
    font-weight: 500;
}

/* Firefox specific */
@-moz-document url-prefix() {
    #dcs option:checked {
        background-color: #ffc107 !important;
        color: #000 !important;
    }
}
</style>

@endsection
@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card card-outline card-warning">
                    <div class="card-header">
                        <h3 class="card-title">{!! $variables['judul'] !!}</h3>
                    </div>
                    <div class="card-body">
                        <form id="formID" method="post" action="{{ route('stores.store', ['prm_id' => $data->id]) }}" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="version" value="{{$data->version}}">
                            <div class="row">
                                <div class="form-group col-md-3">
                                    <label for="code" class="font-weight-bold">Kode Store <span class="text-danger">*</span></label>
                                    <small class="text-muted text-sm">Kode toko unik (maks 20 karakter)</small> 
                                    <input value="{{ old('code', $data->code ?? '') }}"
                                        type="text"
                                        class="form-control"
                                        name="code"
                                        placeholder="contoh: ST001, BGM001"
                                        maxlength="20"
                                        required
                                        {{ $data->id ? 'readonly' : '' }}>
                                    @if ($errors->has('code'))
                                    <span class="text-danger text-left">{{ $errors->first('code') }}</span>
                                    @endif
                                </div>
                                <div class="form-group col-md-3">
                                    <label for="qad_code" class="font-weight-bold">QAD Code <span class="text-danger">*</span></label>
                                    <small class="text-muted text-sm">Kode QAD 4 karakter (wajib diisi)</small>
                                    <input value="{{ old('qad_code', $data->qad_code ?? '') }}"
                                        type="text"
                                        class="form-control text-uppercase"
                                        name="qad_code"
                                        id="qad_code"
                                        placeholder="contoh: 1000"
                                        minlength="4"
                                        maxlength="4"
                                        required>
                                    @if ($errors->has('qad_code'))
                                    <span class="text-danger text-left">{{ $errors->first('qad_code') }}</span>
                                    @endif
                                </div>
                               <div class="form-group col-md-6">
                                    <label for="spb_edit_deadline" class="font-weight-bold">Batas Waktu Edit SPB <span class="text-danger">*</span></label>
                                    <small class="text-muted text-sm">Batas waktu edit SPB di H+1 (default: 11:00)</small>
                                    <input value="{{ old('spb_edit_deadline', $data->spb_edit_deadline ?? '11:00') }}" 
                                           type="time" 
                                           class="form-control" 
                                           name="spb_edit_deadline" 
                                           placeholder="11:00" required>
                                    @if ($errors->has('spb_edit_deadline'))
                                    <span class="text-danger text-left">{{ $errors->first('spb_edit_deadline') }}</span>
                                    @endif
                                </div>
                                
                                <div class="form-group col-md-3">
                                    <label for="name" class="font-weight-bold">Nama <span class="text-danger">*</span></label>
                                    <input value="{{ old('name', $data->name ?? '') }}" type="text" class="form-control" name="name" placeholder="" required>
                                    @if ($errors->has('name'))
                                    <span class="text-danger text-left">{{ $errors->first('name') }}</span>
                                    @endif
                                </div>
                                <div class="form-group col-md-3">
                                    <label for="pic" class="font-weight-bold">Penanggung Jawab <span class="text-danger">*</span></label>
                                    <input value="{{ old('pic', $data->pic ?? '') }}" type="text" class="form-control" name="pic" placeholder="" required>
                                    @if ($errors->has('pic'))
                                    <span class="text-danger text-left">{{ $errors->first('pic') }}</span>
                                    @endif
                                </div> 
                                <div class="form-group col-md-6">
                                    <label for="address" class="font-weight-bold">Alamat <span class="text-danger">*</span></label>
                                    <input value="{{ old('address', $data->address ?? '') }}" type="text" class="form-control" name="address" placeholder="" required>
                                    @if ($errors->has('address'))
                                    <span class="text-danger text-left">{{ $errors->first('address') }}</span>
                                    @endif
                                </div>  
                                <div class="form-group col-md-3">
                                    <label for="pic_phone" class="font-weight-bold">Telepon PJ <span class="text-danger">*</span></label>
                                    <input value="{{ old('pic_phone', $data->pic_phone ?? '') }}" type="text" class="form-control" name="pic_phone" placeholder="" required>
                                    @if ($errors->has('pic_phone'))
                                    <span class="text-danger text-left">{{ $errors->first('pic_phone') }}</span>
                                    @endif
                                </div>
                                <div class="form-group col-md-3">
                                    <label for="pic_email" class="font-weight-bold">Email PJ <span class="text-danger">*</span></label>
                                    <input value="{{ old('pic_email', $data->pic_email ?? '') }}" type="email" class="form-control" name="pic_email" placeholder="" required>
                                    @if ($errors->has('pic_email'))
                                    <span class="text-danger text-left">{{ $errors->first('pic_email') }}</span>
                                    @endif
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="notify_email_shipment" class="font-weight-bold">Email Notifikasi Shipment</label>
                                    <input value="{{ old('notify_email_shipment', $data->notify_email_shipment ?? '') }}" 
                                           type="text" 
                                           class="form-control" 
                                           name="notify_email_shipment" 
                                           placeholder="contoh: aditya@gmail.com,aditya2@gmail.com">
                                    <small class="text-info">
                                        <i class="fas fa-info-circle"></i> Pisahkan multiple email dengan koma (,)
                                    </small>
                                    @if ($errors->has('notify_email_shipment'))
                                    <span class="text-danger text-left">{{ $errors->first('notify_email_shipment') }}</span>
                                    @endif
                                </div> 
                                <div class="form-group col-md-12">
                                    <div class="card card-outline card-warning">
                                        <div class="card-header">
                                            <h3 class="card-title">Distribution Centers (DC) <span class="text-danger">*</span></h3>
                                            <div class="card-tools">
                                                <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                                                    <i class="fas fa-minus"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div class="form-group">
                                                <div class="mb-2">
                                                    <button type="button" class="btn btn-sm btn-success" id="selectAllDcs">
                                                        <i class="fas fa-check-double"></i> Pilih Semua
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-secondary" id="deselectAllDcs">
                                                        <i class="fas fa-times"></i> Hapus Semua
                                                    </button>
                                                    <small class="text-muted ml-2">
                                                        <span id="selectedDcsCount">0</span> dari <span id="totalDcsCount">{{ count($variables['dcs']) }}</span> DC dipilih
                                                    </small>
                                                </div>
                                                <small class="text-info d-block mb-2">
                                                    <i class="fas fa-info-circle"></i> 
                                                    <strong>Tips:</strong> Gunakan Ctrl+Click untuk pilih multiple, Shift+Click untuk pilih range
                                                </small>
                                                <select 
                                                    name="dcs[]" 
                                                    id="dcs" 
                                                    class="form-control" 
                                                    multiple 
                                                    size="10"
                                                    style="height: 250px;" required>
                                                    @foreach($variables['dcs'] as $dc)
                                                    <option value="{{ $dc->id }}" 
                                                        @if($data->id && $data->dcs->contains($dc->id)) selected @endif>
                                                        {{ $dc->doctype }} - {{ $dc->name }}
                                                    </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="form-group mt-3">
                                                <label for="primary_dc_id" class="font-weight-bold">Primary DC <span class="text-danger">*</span></label>
                                                <small class="text-muted text-sm">DC utama untuk store ini (opsional, hanya bisa dipilih dari DC yang sudah dipilih di atas)</small>
                                                <select class="select2 select2-warning" data-dropdown-css-class="select2-warning" name="primary_dc_id" id="primary_dc_id" required style="width:100%">
                                                    <option value="">- Pilih Primary DC -</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-info btn-sm button-cek-permission" data-permission="stores.store"><i class="fas fa-save"></i> Simpan</button>
                            <a href="{{ route('stores.index') }}" class="btn btn-warning btn-sm" data='back' onclick="return notificationBeforeBack(event, this);"> <i class="fas fa-list"></i> List</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
    $(document).ready(function() {
        // Update selected DC count on load
        updateSelectedDcCount();
        
        // Update count when DC selection changes
        $('#dcs').on('change', function() {
            updateSelectedDcCount();
            updatePrimaryDcDropdown();
        });
        
        // Select All DCs button
        $('#selectAllDcs').on('click', function() {
            $('#dcs option').prop('selected', true);
            updateSelectedDcCount();
            updatePrimaryDcDropdown();
        });
        
        // Deselect All DCs button
        $('#deselectAllDcs').on('click', function() {
            $('#dcs option').prop('selected', false);
            updateSelectedDcCount();
            updatePrimaryDcDropdown();
        });
        
        // Function to update selected DC count
        function updateSelectedDcCount() {
            var selectedCount = $('#dcs option:selected').length;
            $('#selectedDcsCount').text(selectedCount);
            
            // Update button states
            if (selectedCount === 0) {
                $('#deselectAllDcs').prop('disabled', true);
            } else {
                $('#deselectAllDcs').prop('disabled', false);
            }
            
            var totalCount = $('#dcs option').length;
            if (selectedCount === totalCount) {
                $('#selectAllDcs').prop('disabled', true);
            } else {
                $('#selectAllDcs').prop('disabled', false);
            }
        }

        // Update primary DC dropdown when DCs selection changes
        function updatePrimaryDcDropdown() {
            var selectedDcs = $('#dcs').val() || [];
            var primaryDcSelect = $('#primary_dc_id');
            var currentPrimary = primaryDcSelect.val();
            
            // Clear and rebuild primary DC options
            primaryDcSelect.empty();
            primaryDcSelect.append('<option value="">- Pilih Primary DC -</option>');
            
            // Add options for selected DCs
            selectedDcs.forEach(function(dcId) {
                var dcOption = $('#dcs option[value="' + dcId + '"]');
                var dcText = dcOption.text();
                primaryDcSelect.append('<option value="' + dcId + '">' + dcText + '</option>');
            });
            
            // Restore previous selection if still valid
            if (selectedDcs.includes(currentPrimary)) {
                primaryDcSelect.val(currentPrimary);
            }
        }

        // Initialize primary DC dropdown on page load
        @if($data->id && $data->dcs->count() > 0)
        updatePrimaryDcDropdown();
        @php
            $primaryDc = $data->dcs->where('pivot.is_primary', true)->first();
        @endphp
        @if($primaryDc)
        $('#primary_dc_id').val('{{ $primaryDc->id }}');
        @endif
        @endif

        $("input[name='reminder_balance']").on('input', function(e) {
            $("#lblamount").html('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + formatRupiah($(this).val()));
        });

        $("input[name='reminder_balance']").trigger('input'); //agar ke formating 

        var isSubmitting = false;

        // Auto uppercase QAD code
        $('#qad_code').on('input', function() {
            this.value = this.value.toUpperCase();
        });

        $('#formID').validate({
            rules: {
                code: {
                    required: true,
                    maxlength: 20
                },
                qad_code: {
                    required: true,
                    minlength: 4,
                    maxlength: 4
                },
                name: {
                    required: true,
                    maxlength: 100
                }
            },
            messages: {
                name: {
                    required: "Nama toko wajib diisi",
                    maxlength: "Nama toko maksimal 100 karakter"
                }
            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function(element) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function(element) {
                $(element).removeClass('is-invalid');
            },
            submitHandler: function(form) {
                if (isSubmitting) return false;

                isSubmitting = true;
                $('#loaderkdnknz').show();

                var formData = new FormData(form);

                $.ajax({
                        type: "POST",
                        url: $(form).attr('action'), // Gunakan attribute action dari form
                        data: formData,
                        processData: false, // WAJIB: jangan proses jadi query string
                        contentType: false, // WAJIB: agar browser set multipart/form-data
                        dataType: "json",
                    })
                    .done(function(data) {
                        Swal.fire({
                            icon: data[0],
                            text: data[1],
                            showCancelButton: false,
                            confirmButtonColor: '#6c757d',
                            confirmButtonText: 'OK',
                            allowOutsideClick: false
                        }).then((result) => {
                            if (result.isConfirmed && data[0] == 'success') {
                                const dataId = parseInt("{{ $data->id }}");
                                if (dataId > 0) {
                                    window.location.href = "{{ route('stores.show', $data->id) }}";
                                } else {
                                    window.location.href = "{{ route('stores.index') }}";
                                }
                            }
                        });
                    })
                    .fail(function(xhr) {
                        let errorText = "Please contact the relevant team or try again.";

                        // Jika status 422 dan ada errors
                        if (xhr.status === 422 && xhr.responseJSON.errors) {
                            const errors = xhr.responseJSON.errors;
                            errorText = '';

                            for (const key in errors) {
                                if (errors.hasOwnProperty(key)) {
                                    errorText += `<strong>${key}</strong> : ${errors[key].join(', ')}<br>`;
                                }
                            }
                        } // Jika ada pesan error umum (misalnya 403, 500, dsb)
                        else if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorText = xhr.responseJSON.message;
                        }

                        Swal.fire({
                            icon: "error",
                            title: "Validasi Gagal",
                            html: errorText, // <- pakai html, bukan text
                            confirmButtonColor: '#6c757d',
                            confirmButtonText: 'OK'
                        });
                    })
                    .always(function() {
                        isSubmitting = false;
                        $('#loaderkdnknz').hide();
                    });
            }
        });
    });
</script>

@endsection