@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => $title ?? 'Penerimaan Barang'])

    <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="window.location='{{ route('trsinm.index') }}'"><i
                                class="fas fa-circle-left me-1"></i><span class="font-weight-bold">Kembali</span></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">

        <form action="{{ route('trsinm.store') }}" method="POST" id="formPlanning">
            @csrf

            {{-- Header Batch --}}
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card shadow-sm">
                        <div class="card-header pb-0">
                            <h6 class="mb-0">Rencana Penerimaan Barang</h6>
                            <p class="text-sm text-muted mb-0">
                                Lengkapi informasi rencana penerimaan barang.
                            </p>
                        </div>

                        <div class="card-body">
                            @php
                                $selectedShift = old('shift', $batch->shift ?? '');
                                $selectedGroup = old('group', $batch->group ?? '');
                            @endphp

                            {{-- Baris 1 --}}
                            <div class="row g-3 mb-3">
                                <div class="col-md-3">
                                    <label class="form-label">Tanggal <span class="text-danger">*</span></label>
                                    <input type="date" name="planned_date" class="form-control"
                                        value="{{ old('planned_date', $batch->planned_date ?? date('Y-m-d')) }}" required>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label">Tipe Penerimaan <span class="text-danger">*</span></label>
                                    <select name="in_type_id" class="form-select select2-basic" id="in_type_id" required>
                                        <option value="">Pilih Tipe</option>
                                        @foreach ($inTypes as $inType)
                                            <option value="{{ $inType->in_type_id }}"
                                                {{ old('in_type_id', $batch->in_type_id ?? '') == $inType->in_type_id ? 'selected' : '' }}>
                                                {{ $inType->in_type_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label">Shift</label>
                                    <select name="shift" class="form-select select2-tags" id="shift">
                                        <option value="">Pilih / ketik Shift</option>

                                        @foreach ($shiftOptions as $shift)
                                            <option value="{{ $shift->value }}"
                                                {{ $selectedShift == $shift->value ? 'selected' : '' }}>
                                                {{ $shift->label }}
                                            </option>
                                        @endforeach

                                        @if ($selectedShift && !$shiftOptions->pluck('value')->contains($selectedShift))
                                            <option value="{{ $selectedShift }}" selected>
                                                {{ $selectedShift }}
                                            </option>
                                        @endif
                                    </select>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label">Group</label>
                                    <select name="group" class="form-select select2-tags" id="group">
                                        <option value="">Pilih / ketik Group</option>

                                        @foreach ($groupOptions as $groupOption)
                                            <option value="{{ $groupOption->value }}"
                                                {{ $selectedGroup == $groupOption->value ? 'selected' : '' }}>
                                                {{ $groupOption->label }}
                                            </option>
                                        @endforeach

                                        @if ($selectedGroup && !$groupOptions->pluck('value')->contains($selectedGroup))
                                            <option value="{{ $selectedGroup }}" selected>
                                                {{ $selectedGroup }}
                                            </option>
                                        @endif
                                    </select>
                                </div>
                            </div>

                            {{-- Baris 2 --}}
                            <div class="row g-3 mb-3">
                                <div class="col-md-3">
                                    <label class="form-label">Tipe Material <span class="text-danger">*</span></label>
                                    <select name="tipe" class="form-select select2-basic" id="tipe" required>
                                        <option value="">Pilih Tipe Material</option>
                                        @foreach ($tipeMaterialOptions as $tipe)
                                            <option value="{{ $tipe->tipe_material_id }}"
                                                {{ old('tipe', $batch->tipe ?? '') == $tipe->tipe_material_id ? 'selected' : '' }}>
                                                {{ $tipe->tipe_material_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label">
                                        Vendor <span class="text-danger vendor-required-mark">*</span>
                                    </label>

                                    <select name="vendor_id" class="form-select select2-basic" id="headerVendorId">
                                        <option value="">Pilih Vendor</option>
                                        @foreach ($vendors as $vendor)
                                            <option value="{{ $vendor->vendor_id }}"
                                                {{ old('vendor_id', $batch->vendor_id ?? '') == $vendor->vendor_id ? 'selected' : '' }}>
                                                {{ $vendor->vendor_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label">Mode <span class="text-danger">*</span></label>
                                    <select name="receive_mode" class="form-select select2-basic" id="receive_mode"
                                        required>
                                        <option value="GENERATE"
                                            {{ old('receive_mode', $batch->receive_mode ?? 'GENERATE') == 'GENERATE' ? 'selected' : '' }}>
                                            Cetak QR Baru
                                        </option>
                                        <option value="USE_VENDOR_ID"
                                            {{ old('receive_mode', $batch->receive_mode ?? '') == 'USE_VENDOR_ID' ? 'selected' : '' }}>
                                            Pakai QR Vendor
                                        </option>
                                    </select>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label">Nomor Surat Jalan</label>
                                    <input type="text" name="surat_jalan" class="form-control"
                                        value="{{ old('surat_jalan', $batch->surat_jalan ?? '') }}"
                                        placeholder="Nomor surat jalan">
                                </div>
                            </div>
                            {{-- Baris 3 --}}
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label class="form-label">PIC Pengirim</label>
                                    <select name="pic_pengirim_id" class="form-select" id="pic_pengirim_id">
                                        <option value="">Pilih PIC Pengirim</option>
                                        @foreach ($picPengirimOptions as $pic)
                                            <option value="{{ $pic->id_pic_in }}"
                                                {{ old('pic_pengirim_id', $batch->pic_pengirim_id ?? '') == $pic->id_pic_in ? 'selected' : '' }}>
                                                {{ $pic->nama_pic_in }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label">PIC Penerima</label>
                                    <select name="pic_penerima_id" class="form-select" id="pic_penerima_id">
                                        <option value="">Pilih PIC Penerima</option>
                                        @foreach ($picPenerimaOptions as $pic)
                                            <option value="{{ $pic->id_pic_in }}"
                                                {{ old('pic_penerima_id', $batch->pic_penerima_id ?? '') == $pic->id_pic_in ? 'selected' : '' }}>
                                                {{ $pic->nama_pic_in }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Catatan / Remarks</label>
                                    <textarea name="remarks" class="form-control planning-remarks-input" rows="3"
                                        placeholder="Tambahkan catatan penerimaan...">{{ old('remarks', $batch->remarks ?? '') }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- Detail Material Planning --}}
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card shadow-sm">
                        <div class="card-header pb-0">
                            <div class="d-flex justify-content-between align-items-center">
                                <h6 class="mb-0">
                                    Daftar Material yang Diterima
                                </h6>
                                <button type="button" class="btn btn-success btn-s mb-0" id="btnAddItem">
                                    <i class="fas fa-plus me-1"></i> Tambah Material
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table align-items-center mb-0" id="tableItems">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th width="5%">No</th>
                                            <th width="33%">Material <span class="text-danger">*</span></th>
                                            <th width="16%">Berat Per Bag (KG) <span class="text-danger">*</span></th>
                                            <th width="16%">Qty Planned (bag) <span class="text-danger">*</span></th>
                                            <th width="20%">Catatan</th>
                                            <th class="text-center" width="10%">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody id="itemRows">
                                        {{-- Rows generated by JavaScript --}}
                                    </tbody>
                                    <tfoot>
                                        <tr class="bg-light">
                                            <td colspan="2" class="text-end fw-bold">Total:</td>
                                            <td class="text-center">-</td>
                                            <td>
                                                <strong id="totalPlanned">0</strong> bag
                                            </td>
                                            <td>
                                                <strong id="totalItems">0</strong> material
                                            </td>
                                            <td></td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Action Buttons --}}
            <div class="row">
                <div class="col-12">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="text-muted text-sm">
                                    <i class="fas fa-info-circle me-1"></i>
                                    Data ini hanya menyimpan <strong>rencana penerimaan</strong>.
                                </div>
                                <div>
                                    <a href="{{ route('trsinm.index') }}" class="btn btn-danger">
                                        <i class="fas fa-times me-1"></i> Batal
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save me-1"></i> Simpan
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    {{-- Template Row Item (Hidden) --}}
    <template id="itemRowTemplate">
        <tr class="item-row">
            <td class="text-center">
                <span class="row-number">1</span>
            </td>

            <td>
                <select name="items[__INDEX__][sku_code]" class="form-select form-select-sm sku-select" required>
                    <option value="">Pilih Material</option>

                    @foreach ($materials as $material)
                        @php
                            $skuPrefix = strtoupper(substr($material->sku_code ?? '', 0, 1));
                        @endphp

                        <option value="{{ $material->sku_code }}" data-nama="{{ $material->nama_material }}"
                            data-kode-lama="{{ $material->kode_lama ?? '' }}"
                            data-vendor-id="{{ $material->vendor_id ?? '' }}" data-sku-prefix="{{ $skuPrefix }}"
                            data-color="{{ $material->color_name }}" data-grade="{{ $material->grade }}"
                            data-satuan="{{ $material->satuan_name }}">

                            {{ $material->sku_code }}

                            @if (!empty($material->kode_lama))
                                / {{ $material->kode_lama }}
                            @endif

                            - {{ $material->nama_material }}

                            @if ($material->color_name)
                                ({{ $material->color_name }})
                            @endif

                            @if ($material->grade)
                                [{{ $material->grade }}]
                            @endif
                        </option>
                    @endforeach
                </select>

                <input type="hidden" name="items[__INDEX__][vendor_id]" class="vendor-select" value="">
            </td>

            <td>
                <input type="number" name="items[__INDEX__][berat_per_bag]" min="0.001" step="0.001"
                    class="form-control form-control-sm berat-input" placeholder="0.000" required>
            </td>

            <td>
                <input type="number" name="items[__INDEX__][qty_planned]" min="1"
                    class="form-control form-control-sm qty-input" placeholder="0" required>
            </td>

            <td>
                <input type="text" name="items[__INDEX__][notes]"
                    class="form-control form-control-sm material-note-input" placeholder="Catatan material...">
            </td>

            <td class="text-center">
                <button type="button" class="btn btn-link text-danger p-0 mt-2 btn-remove-item" title="Hapus">
                    <i class="fas fa-trash fa-lg"></i>
                </button>
            </td>
        </tr>
    </template>

    <style>
        .planning-remarks-input {
            min-height: 84px;
            resize: vertical;
        }

        .form-control,
        .form-select {
            height: 42px;
            font-size: 0.875rem;
        }

        textarea.form-control {
            height: auto;
        }

        .select2-container {
            width: 100% !important;
            display: block;
        }

        .select2-container--default .select2-selection--single {
            height: 42px !important;
            border: 1px solid #d2d6da !important;
            border-radius: 0.375rem !important;
            background-color: #fff !important;
            position: relative !important;
            overflow: visible !important;
            box-sizing: border-box !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            height: 40px !important;
            line-height: 40px !important;
            padding-left: 0.75rem !important;
            padding-right: 42px !important;
            color: #495057 !important;
            font-size: 0.875rem !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 40px !important;
            width: 38px !important;
            top: 0 !important;
            right: 0 !important;
            position: absolute !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow b {
            margin-left: -4px !important;
            margin-top: -2px !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__clear {
            display: none !important;
        }

        .select2-container--default.select2-container--focus .select2-selection--single,
        .select2-container--default.select2-container--open .select2-selection--single {
            border-color: #5e72e4 !important;
            outline: 0 !important;
        }

        .select2-dropdown {
            border: 1px solid #d2d6da !important;
            border-radius: 0.375rem !important;
            z-index: 9999;
        }
    </style>
@endsection

@push('addjs')
    @include('js.trsinm-planning')

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            @if ($errors->any())
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    html: '{!! implode('<br>', $errors->all()) !!}',
                    confirmButtonColor: '#028284'
                });
            @endif
        });

        $(document).ready(function() {
            $('.select2-basic').select2({
                width: '100%',
                allowClear: false,
                placeholder: function() {
                    return $(this).find('option:first').text();
                }
            });

            $('.select2-tags').select2({
                tags: true,
                width: '100%',
                allowClear: false,
                placeholder: function() {
                    return $(this).find('option:first').text();
                },
                createTag: function(params) {
                    const term = $.trim(params.term);

                    if (term === '') {
                        return null;
                    }

                    return {
                        id: term,
                        text: term,
                        newTag: true
                    };
                }
            });
        });
    </script>
@endpush