@extends('layouts.adminlte')

@section('title', 'MASTER AREA')
@section('page_title', 'MASTER AREA')

@push('styles')
<link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
<link rel="stylesheet" href="{{ asset('vendor/select2/css/select2.min.css') }}" />
<link rel="stylesheet" href="{{ asset('vendor/select2/css/select2-bootstrap-5-theme.min.css') }}" />
<style>
    .client-select-tools {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .75rem;
        margin-top: .5rem;
        flex-wrap: wrap;
    }
    .client-select-tools .btn-group {
        display: flex;
        gap: .5rem;
        flex-wrap: wrap;
    }
    .client-select-tools .btn-link {
        padding: 0;
        font-size: .85rem;
        text-decoration: none;
    }
</style>
@endpush

@section('content')
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="card-title m-0">Master Area</h3>
        <button class="btn btn-primary btn-sm" id="btnAddArea"><i class="fas fa-plus me-1"></i>Tambah Area</button>
    </div>
    <div class="card-body">
        <div class="alert alert-info small mb-3">
            Hubungkan area ke <strong>client</strong>, lalu gunakan <strong>induk area</strong> untuk membentuk hirarki seperti <code>Client A / Workshop / Line A</code>.
        </div>
        <div class="table-responsive">
            <table id="areaTable" class="table table-striped table-hover align-middle w-100">
                <thead>
                    <tr>
                        <th>No.</th>
                        <th>Kode</th>
                        <th>Client</th>
                        <th>Nama</th>
                        <th>Induk</th>
                        <th>Label Hirarki</th>
                        <th>Status</th>
                        <th>Description</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="areaModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="areaModalTitle">Tambah Area</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="areaForm">
                <div class="modal-body">
                    <input type="hidden" id="areaId" />
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Kode</label>
                            <input type="text" class="form-control" id="areaCode" maxlength="60" required />
                        </div>
                        <div class="col-md-8">
                            <label class="form-label">Nama Area</label>
                            <input type="text" class="form-control" id="areaName" maxlength="180" required />
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Client</label>
                            <select class="form-select" id="areaClientId">
                                <option value="">- Tanpa Client / General -</option>
                            </select>
                            <div class="client-select-tools">
                                <small class="text-muted">Client area bisa ditambah langsung dari halaman ini.</small>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-outline-primary btn-sm" id="btnQuickAddClient">
                                        <i class="fas fa-plus me-1"></i>Tambah Client
                                    </button>
                                    <a href="{{ route('master_client.index') }}" target="_blank" class="btn btn-link btn-sm">
                                        Kelola Client
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Induk Area</label>
                            <select class="form-select" id="areaParentId">
                                <option value="">- Area Utama / Tanpa Induk -</option>
                            </select>
                        </div>
                        <div class="col-md-12 d-flex align-items-end">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="areaActive" checked>
                                <label class="form-check-label" for="areaActive">Active</label>
                            </div>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Description</label>
                            <textarea class="form-control" id="areaDescription" rows="3"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="clientQuickModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tambah Client Cepat</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="clientQuickForm">
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Kode</label>
                            <input type="text" class="form-control" id="quickClientCode" maxlength="60" required />
                        </div>
                        <div class="col-md-8">
                            <label class="form-label">Nama Client</label>
                            <input type="text" class="form-control" id="quickClientName" maxlength="180" required />
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Contact Person</label>
                            <input type="text" class="form-control" id="quickClientContact" maxlength="120" />
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Phone</label>
                            <input type="text" class="form-control" id="quickClientPhone" maxlength="40" />
                        </div>
                        <div class="col-12">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="quickClientActive" checked>
                                <label class="form-check-label" for="quickClientActive">Active</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Simpan Client</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
<script src="{{ asset('vendor/select2/js/select2.min.js') }}"></script>
<script>
$(function () {
    const modalEl = document.getElementById('areaModal');
    const modal = modalEl ? new bootstrap.Modal(modalEl) : null;
    const quickClientModalEl = document.getElementById('clientQuickModal');
    const quickClientModal = quickClientModalEl ? new bootstrap.Modal(quickClientModalEl) : null;
    let areaRows = [];
    let clientRows = [];

    const table = $('#areaTable').DataTable({
        ajax: '{{ route('master_area.data') }}',
        pageLength: 25,
        order: [[5, 'asc']],
        columns: [
            { data: null, render: (d, t, r, m) => m.row + 1 },
            { data: 'code' },
            { data: 'client_label', render: (v) => v || '<span class="text-muted">General</span>' },
            { data: 'name' },
            { data: 'parent_name', render: (v) => v || '-' },
            { data: 'label', render: (v) => v || '-' },
            { data: 'is_active', render: (v) => v ? '<span class="badge bg-success">Aktif</span>' : '<span class="badge bg-secondary">Nonaktif</span>' },
            { data: 'description', render: (v) => v || '-' },
            {
                data: null,
                orderable: false,
                render: (d, t, r) => `
                    <button class="btn btn-sm btn-outline-primary btn-edit" data-id="${r.id}">Edit</button>
                    <button class="btn btn-sm btn-outline-danger btn-delete" data-id="${r.id}">Delete</button>
                `
            }
        ]
    });

    const buildClientOptionLabel = (row) => {
        const code = (row.code || '').toString().trim();
        const name = (row.name || '').toString().trim();
        if (code && name) return `${code} - ${name}`;
        return name || code || '-';
    };

    const initClientSelect = (selectedId = '') => {
        const options = ['<option value="">- Tanpa Client / General -</option>']
            .concat((clientRows || []).map((row) => `<option value="${row.id}">${buildClientOptionLabel(row)}</option>`));
        const select = $('#areaClientId');
        if (select.data('select2')) {
            select.select2('destroy');
        }
        select.html(options.join(''));
        select.val(selectedId || '');
        select.select2({
            theme: 'bootstrap-5',
            dropdownParent: $('#areaModal'),
            width: '100%',
            placeholder: 'Cari client...',
            allowClear: true,
        });
    };

    const loadClients = (selectedId = null) => $.getJSON('{{ route('master_client.data') }}')
        .done((resp) => {
            clientRows = resp?.data || [];
            initClientSelect(selectedId !== null ? selectedId : ($('#areaClientId').val() || ''));
        })
        .fail(() => {
            clientRows = [];
            initClientSelect('');
        });

    const initParentSelect = (selectedId = '', excludeId = '') => {
        const selectedClientId = ($('#areaClientId').val() || '').toString();
        const options = ['<option value="">- Area Utama / Tanpa Induk -</option>']
            .concat(
                (areaRows || [])
                    .filter((row) => String(row.id || '') !== String(excludeId || ''))
                    .filter((row) => String(row.client_id || '') === selectedClientId)
                    .map((row) => `<option value="${row.id}">${row.label || row.name}</option>`)
            );
        const select = $('#areaParentId');
        if (select.data('select2')) {
            select.select2('destroy');
        }
        select.html(options.join(''));
        select.val(selectedId || '');
        select.select2({
            theme: 'bootstrap-5',
            dropdownParent: $('#areaModal'),
            width: '100%',
            placeholder: 'Cari induk area...',
            allowClear: true,
        });
    };

    const refreshRows = () => $.when(
        $.getJSON('{{ route('master_area.data') }}'),
        $.getJSON('{{ route('master_client.data') }}')
    ).done((areaResp, clientResp) => {
        areaRows = areaResp[0]?.data || [];
        clientRows = clientResp[0]?.data || [];
    }).fail(() => {
        areaRows = [];
        clientRows = [];
    });

    $('#btnAddArea').on('click', function () {
        $('#areaModalTitle').text('Tambah Area');
        $('#areaId').val('');
        $('#areaCode').val('');
        $('#areaName').val('');
        $('#areaDescription').val('');
        $('#areaActive').prop('checked', true);
        initClientSelect('');
        initParentSelect('', '');
        modal.show();
    });

    $('#btnQuickAddClient').on('click', function () {
        $('#quickClientCode').val('');
        $('#quickClientName').val('');
        $('#quickClientContact').val('');
        $('#quickClientPhone').val('');
        $('#quickClientActive').prop('checked', true);
        quickClientModal.show();
    });

    $('#areaTable').on('click', '.btn-edit', function () {
        const row = table.row($(this).closest('tr')).data();
        if (!row) return;
        $('#areaModalTitle').text('Edit Area');
        $('#areaId').val(row.id);
        $('#areaCode').val(row.code || '');
        $('#areaName').val(row.name || '');
        $('#areaDescription').val(row.description || '');
        $('#areaActive').prop('checked', !!row.is_active);
        initClientSelect(row.client_id || '');
        initParentSelect(row.parent_id || '', row.id || '');
        modal.show();
    });

    $('#areaClientId').on('change', function () {
        const editingId = $('#areaId').val() || '';
        initParentSelect('', editingId);
    });

    $('#areaForm').on('submit', function (e) {
        e.preventDefault();
        const id = $('#areaId').val();
        const payload = {
            code: ($('#areaCode').val() || '').toString().trim(),
            name: ($('#areaName').val() || '').toString().trim(),
            client_id: $('#areaClientId').val() || '',
            parent_id: $('#areaParentId').val() || '',
            description: ($('#areaDescription').val() || '').toString().trim(),
            is_active: $('#areaActive').is(':checked') ? 1 : 0,
        };
        if (!payload.code || !payload.name) {
            Swal.fire('Warning', 'Kode dan nama area wajib diisi.', 'warning');
            return;
        }

        $.ajax({
            url: id ? `{{ url('/master-area') }}/${id}` : '{{ route('master_area.store') }}',
            type: id ? 'PUT' : 'POST',
            data: payload,
        }).done((resp) => {
            modal.hide();
            refreshRows().always(() => table.ajax.reload(null, false));
            Swal.fire('Success', resp?.message || 'Area saved', 'success');
        }).fail((xhr) => {
            Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error');
        });
    });

    $('#clientQuickForm').on('submit', function (e) {
        e.preventDefault();

        const payload = {
            code: ($('#quickClientCode').val() || '').toString().trim(),
            name: ($('#quickClientName').val() || '').toString().trim(),
            contact_person: ($('#quickClientContact').val() || '').toString().trim(),
            phone: ($('#quickClientPhone').val() || '').toString().trim(),
            is_active: $('#quickClientActive').is(':checked') ? 1 : 0,
        };

        if (!payload.code || !payload.name) {
            Swal.fire('Warning', 'Kode dan nama client wajib diisi.', 'warning');
            return;
        }

        $.ajax({
            url: '{{ route('master_client.store') }}',
            type: 'POST',
            data: payload,
        }).done((resp) => {
            const selectedId = resp?.data?.id ? String(resp.data.id) : '';
            quickClientModal.hide();
            loadClients(selectedId).done(() => {
                initParentSelect('', $('#areaId').val() || '');
            });
            Swal.fire('Success', resp?.message || 'Client created', 'success');
        }).fail((xhr) => {
            Swal.fire('Error', xhr.responseJSON?.message || 'Save client failed', 'error');
        });
    });

    $('#areaTable').on('click', '.btn-delete', function () {
        const row = table.row($(this).closest('tr')).data();
        if (!row) return;
        Swal.fire({
            title: `Hapus area ${row.label || row.name}?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Ya, Hapus'
        }).then((result) => {
            if (!result.isConfirmed) return;
            $.ajax({
                url: `{{ url('/master-area') }}/${row.id}`,
                type: 'DELETE'
            }).done((resp) => {
                refreshRows().always(() => table.ajax.reload(null, false));
                Swal.fire('Success', resp?.message || 'Area deleted', 'success');
            }).fail((xhr) => {
                Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error');
            });
        });
    });

    refreshRows();
});
</script>
@endpush