@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1">
                            </i><span class="font-weight-bold">Kembali</button>
                        @if ($authorize->add == '1')
                            <button class="btn btn-primary mb-0"
                                onclick="event.preventDefault(); document.getElementById('mstttb-form').submit();"><i
                                    class="fas fa-floppy-disk me-1"> </i><span class="font-weight-bold">Simpan</button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="mstttb-form"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="card">
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Insert {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="user_id" class="form-control-label">Salesperson <span class="text-danger">*</span></label>
                                        @if (!empty($is_admin))
                                            <select class="form-select select2" name="user_id" id="user_id" required>
                                                <option value="">-- Pilih Salesperson --</option>
                                                @foreach ($users as $user)
                                                    <option value="{{ $user->id }}" {{ old('user_id') == $user->id ? 'selected' : '' }}>
                                                        {{ $user->username }} - {{ $user->firstname }} {{ $user->lastname }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        @else
                                            <input type="hidden" name="user_id" value="{{ $user_login->id }}">
                                            <input class="form-control" type="text" value="{{ $user_login->username }} - {{ $user_login->firstname }} {{ $user_login->lastname }}" readonly disabled>
                                        @endif
                                        @error('user_id')
                                            <p class='text-danger text-xs pt-1'> {{ $message }} </p>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="year" class="form-control-label">Year <span class="text-danger">*</span></label>
                                        <select class="form-select" name="year" id="year" required>
                                            @php
                                                $currentYear = date('Y');
                                                $optionsYear = range($currentYear, $currentYear - 5);
                                            @endphp
                                            @foreach ($optionsYear as $y)
                                                <option value="{{ $y }}" {{ old('year') == $y ? 'selected' : '' }}>{{ $y }}</option>
                                            @endforeach
                                        </select>
                                        @error('year')
                                            <p class='text-danger text-xs pt-1'> {{ $message }} </p>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="budget" class="form-control-label">Budget (KG)</label>
                                        <input class="form-control" type="number" step="0.01" min="0"
                                            value="{{ old('budget', 0) }}" name="budget" id="budget">
                                        @error('budget')
                                            <p class='text-danger text-xs pt-1'> {{ $message }} </p>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="threshold" class="form-control-label">Threshold (KG)</label>
                                        <input class="form-control" type="number" step="0.01" min="0"
                                            value="{{ old('threshold', 0) }}" name="threshold" id="threshold">
                                        @error('threshold')
                                            <p class='text-danger text-xs pt-1'> {{ $message }} </p>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="target" class="form-control-label">Target (KG)</label>
                                        <input class="form-control" type="number" step="0.01" min="0"
                                            value="{{ old('target', 0) }}" name="target" id="target">
                                        @error('target')
                                            <p class='text-danger text-xs pt-1'> {{ $message }} </p>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card mt-3">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <p class="text-uppercase text-sm mb-0">Mapping Customer & Divisi</p>
                                    <p class="text-secondary text-xs mb-0">Daftar customer yang di-handle oleh salesperson ini beserta divisi (H/M/I) untuk override data mapping SAP.</p>
                                </div>
                                <button type="button" class="btn btn-sm btn-primary mb-0" id="add-customer-row">
                                    <i class="fas fa-plus me-1"></i><span class="font-weight-bold">Tambah Customer</span>
                                </button>
                            </div>
                            <hr class="horizontal dark mt-2">
                            <div class="table-responsive">
                                <table class="table align-items-center" id="customer-target-table">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th width="50">No</th>
                                            <th>Customer</th>
                                            <th width="250">Divisi / Sub Division</th>
                                            <th width="80" class="text-center">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody id="customer-target-body">
                                        <tr class="no-rows">
                                            <td colspan="4" class="text-center text-secondary">
                                                Belum ada customer. Klik "Tambah Customer" untuk menambahkan mapping customer.
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        const customerOptions = @json($customers->map(fn($c) => ['id' => $c->kode_sap, 'text' => $c->kode_sap . ' - ' . $c->customer])->toArray());

        function addCustomerRow(code = '', subDivision = '') {
            const body = $('#customer-target-body');
            body.find('.no-rows').remove();
            const idx = body.find('tr.row-customer').length;
            const row = `
                <tr class="row-customer">
                    <td class="row-number text-center">${idx + 1}</td>
                    <td>
                        <select class="form-select select2-customer" name="customers[${idx}][customer_code]" required>
                            <option value="">-- Pilih Customer --</option>
                            ${customerOptions.map(o => `<option value="${o.id}" ${o.id === code ? 'selected' : ''}>${o.text}</option>`).join('')}
                        </select>
                    </td>
                    <td>
                        <select class="form-select" name="customers[${idx}][sub_division]">
                            <option value="" ${subDivision === '' ? 'selected' : ''}>Default (SAP/System)</option>
                            <option value="H" ${subDivision === 'H' ? 'selected' : ''}>H - Hygiene</option>
                            <option value="M" ${subDivision === 'M' ? 'selected' : ''}>M - Medical</option>
                            <option value="I" ${subDivision === 'I' ? 'selected' : ''}>I - Industrial</option>
                        </select>
                    </td>
                    <td class="text-center">
                        <button type="button" class="btn btn-sm btn-danger mb-0 remove-customer-row"><i class="fas fa-trash"></i></button>
                    </td>
                </tr>`;
            body.append(row);
            renumberRows();
            $('.select2-customer').select2({
                placeholder: '-- Pilih Customer --',
                allowClear: true,
                width: '100%'
            });
        }

        function renumberRows() {
            $('#customer-target-body tr.row-customer').each(function(i) {
                $(this).find('.row-number').text(i + 1);
            });
        }

        $(document).ready(function() {
            $('.select2').select2({
                width: '100%'
            });

            $('#add-customer-row').on('click', function() {
                addCustomerRow();
            });

            $(document).on('click', '.remove-customer-row', function() {
                $(this).closest('tr').remove();
                if ($('#customer-target-body tr.row-customer').length === 0) {
                    $('#customer-target-body').append(
                        '<tr class="no-rows"><td colspan="4" class="text-center text-secondary">Belum ada customer. Klik "Tambah Customer" untuk menambahkan mapping customer.</td></tr>'
                    );
                }
                renumberRows();
            });
        });
    </script>
@endpush