@extends('layouts.app')

@section('content')
    <div class="alert alert-secondary" role="alert">
        Youre currently creating new details for header : {{ $productionCardHeader->finish_good_code }}
    </div>
    <div class="row">
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="">
                        <h3 class="f-w-600">Production Card No : {{ $productionCardHeader->productionCard->no }}</h3>
                        <span class="mt-1">Date : {{ $productionCardHeader->productionCard->date }}</span>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="">
                        <table class="product-page-width">
                            <tbody>
                                <tr>
                                    <td><b>Finish Good Code</b></td>
                                    <td class="ps-1">:</td>
                                    <td class="ps-3">{{ $productionCardHeader->finish_good_code }}</td>
                                </tr>
                                <tr>
                                    <td><b>Finish Good Name</b></td>
                                    <td class="ps-1">:</td>
                                    <td class="ps-3">{{ $productionCardHeader->finishGood->name }}</td>
                                </tr>
                                <tr>
                                    <td><b>Finish Good UoM</b></td>
                                    <td class="ps-1">:</td>
                                    <td class="ps-3">{{ $productionCardHeader->finishGood->uom_code }}</td>
                                </tr>
                                <tr>
                                    <td><b>Color Code</b></td>
                                    <td class="ps-1">:</td>
                                    <td class="ps-3">{{ $productionCardHeader->finishGood->color_code }}</td>
                                </tr>
                                <tr>
                                    <td><b>Target Qty</b></td>
                                    <td class="ps-1">:</td>
                                    <td class="ps-3">{{ $productionCardHeader->target_qty }}</td>
                                </tr>
                                <tr>
                                    <td><b>Remarks</b></td>
                                    <td class="ps-1">:</td>
                                    <td class="ps-3">{{ $productionCardHeader->remarks }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="">
                        @if ($productionCardHeader->finishGood->image_path)
                            <img src="/storage/{{ $productionCardHeader->finishGood->image_path }}" alt="img"
                                style="width: 150px; height: 150px;">
                        @endif
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <div class="">
                    <a href="{{ route('production-card.edit', $productionCardHeader->productionCard) }}">
                        <button class="btn btn-secondary" type="button">
                            Back
                        </button>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <div class="">
                    <h4>Production Card Details</h4>
                    <p class="f-m-light mt-1">Add some materials for your Production Card</p>
                </div>
                <div class="">
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addDetailModal">
                        Add Details
                    </button>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive theme-scrollbar">
                <table class="table table-bordered table-hover" id="basic-1">
                    <thead>
                        <tr class="bg-light-primary text-dark">
                            <th>Divisi Code</th>
                            <th>Material Code</th>
                            <th>Material Name</th>
                            <th>UoM</th>
                            <th>Color</th>
                            <th>Consumption</th>
                            <th>Total Qty</th>
                            <th>Currency Code</th>
                            <th>Price Per Unit</th>
                            <th>Total Price</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($productionCardHeader->details as $detail)
                            <tr>
                                <td>{{ $detail->divisi_code }}</td>
                                <td>{{ $detail->material_code }}</td>
                                <td>{{ $detail->material->name }}</td>
                                <td>{{ $detail->material->uom_code }}</td>
                                <td>{{ $detail->material->color_code }}</td>
                                <td>{{ $detail->consumption }}</td>
                                <td>{{ $detail->total_qty }}</td>
                                <td>{{ $detail->header->productionCard->currency_code }}</td>
                                <td>{{ $detail->price_per_unit }}</td>
                                <td>{{ $detail->total_price }}</td>
                                <td>
                                    <div class="d-flex justify-content-start gap-3">
                                        <button class="btn btn-warning btn-sm ms-2" data-bs-toggle="modal"
                                            data-bs-target="#editDetailModal{{ $detail->id }}">
                                            Edit
                                        </button>
                                        <div class="" data-bs-toggle="collapse"
                                            data-bs-target="#delete-{{ $detail->id }}">
                                            <button class="btn btn-sm btn-danger">
                                                Delete
                                            </button>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-start">
                                        <div class="collapse multi-collapse dark-accordion"
                                            id="delete-{{ $detail->id }}">
                                            <div class="card card-body mt-3 mb-0 collapse-wrapper accordion-light-primary">
                                                <p>Are you sure want to delete this ? .</p>
                                                <div class="d-flex justify-content-between gap-3">
                                                    <form
                                                        action="{{ route('production-card.header.detail.destroy', $detail) }}"
                                                        method="POST">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button class="btn btn-danger" type="submit">
                                                            Yes, delete!
                                                        </button>
                                                    </form>
                                                    <button class="btn btn-secondary" data-bs-toggle="collapse"
                                                        data-bs-target="#delete-{{ $detail->id }}">
                                                        Cancel
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Add Detail Modal -->
    <div class="modal fade" id="addDetailModal" tabindex="-1" aria-labelledby="addDetailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addDetailModalLabel">Add BOM Detail</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('production-card.header.detail.store', $productionCardHeader) }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="">
                            <div class="mb-3">
                                <label for="divisi_code" class="form-label required">Select Divisi</label>
                                <select class="form-select @error('divisi_code') is-invalid @enderror" id="divisi_code"
                                    name="divisi_code" required>
                                    <option value="">-- Select --</option>
                                    @foreach ($divisis as $divisi)
                                        <option value="{{ $divisi->code }}">
                                            {{ $divisi->code }} - {{ $divisi->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('divisi_code')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label for="material_code" class="form-label required">Select Material</label>
                                <select class="select2 form-select @error('material_code') is-invalid @enderror"
                                    id="material_code" name="material_code" required>
                                    <option value="">-- Select --</option>
                                    @foreach ($materials as $material)
                                        <option value="{{ $material->code }}">
                                            {{ $material->formatted_material }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('material_code')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label for="consumption" class="form-label required">Consumption</label>
                                <input type="text" class="form-control @error('consumption') is-invalid @enderror"
                                    id="consumption" name="consumption" value="{{ old('consumption', 0) }}" required>
                                @error('consumption')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>
                        <hr>
                        <div class="">
                            <h5 class="">Attribute</h5>
                            <div class="d-flex justify-content-end">
                                <button type="button" class="btn btn-info mt-3" id="add-attribute-row">
                                    <i class="icon-plus"></i>
                                    Tambah Atribut
                                </button>
                            </div>
                            <div class="table-responsive mt-3">
                                <table class="table table-bordered table-hover" id="attribute-table">
                                    <thead>
                                        <tr class="bg-light-primary text-dark">
                                            <th>Attribute Name</th>
                                            <th>Attribute Value</th>
                                            <th style="width: 50px;">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody id="attribute-body">
                                        <tr>
                                            <td>
                                                <input type="text" name="attribute[0][name]" class="form-control"
                                                    placeholder="e.g., Length">
                                            </td>
                                            <td>
                                                <input type="text" name="attribute[0][value]" class="form-control"
                                                    placeholder="e.g., 0.02341">
                                            </td>
                                            <td class="text-center">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Edit Detail Modal -->
    @foreach ($productionCardHeader->details as $detail)
        <div class="modal fade" id="editDetailModal{{ $detail->id }}" tabindex="-1"
            aria-labelledby="editDetailModalLabel{{ $detail->id }}" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editDetailModalLabel{{ $detail->id }}">Edit BOM Detail</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form action="{{ route('production-card.header.detail.update', $detail->id) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="modal-body ">
                            <div class="mb-3">
                                <label for="divisi_code" class="form-label required">Select Divisi</label>
                                <select class="form-select" id="divisi_code_{{ $detail->id }}" name="divisi_code"
                                    required>
                                    <option value="">-- Select --</option>
                                    @foreach ($divisis as $divisi)
                                        <option value="{{ $divisi->code }}"
                                            {{ $detail->divisi_code == $divisi->code ? 'selected' : '' }}>
                                            {{ $divisi->code }} - {{ $divisi->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="material_code" class="form-label required">Select Material</label>
                                <select class="form-select @error('material_code') is-invalid @enderror"
                                    id="material_code" name="material_code" required>
                                    <option value="">-- Select --</option>
                                    @foreach ($materials as $material)
                                        <option value="{{ $material->code }}"
                                            @if ($detail->material_code == $material->code) selected @endif>
                                            {{ $material->formatted_material }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('material_code')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label for="consumption" class="form-label required">Consumption</label>
                                <input type="text" class="form-control" id="consumption" name="consumption"
                                    value="{{ old('consumption', $detail->consumption) }}" required>
                            </div>
                            <div class="mb-3">
                                <label for="total_qty" class="form-label required">Total Qty</label>
                                <input type="text" class="form-control" id="total_qty" name="total_qty"
                                    value="{{ old('total_qty', $detail->total_qty) }}" required>
                            </div>
                            <div class="mb-3">
                                <label for="price_per_unit" class="form-label required">Price Per Unit</label>
                                <input type="text" class="form-control" id="price_per_unit" name="price_per_unit"
                                    value="{{ old('price_per_unit', $detail->price_per_unit) }}" required>
                            </div>

                            <hr>

                            <div class="attribute-section">
                                <h5 class="">Attribute</h5>
                                <div class="d-flex justify-content-end">
                                    <button type="button" class="btn btn-info mt-3 add-attribute-row-edit"
                                        data-detail-id="{{ $detail->id }}" id="add-attribute-row-{{ $detail->id }}">
                                        <i class="icon-plus"></i> Tambah Atribut
                                    </button>
                                </div>
                                <div class="table-responsive mt-3">
                                    <table class="table table-bordered table-hover attribute-table-edit"
                                        id="attribute-table-{{ $detail->id }}">
                                        <thead>
                                            <tr class="bg-light-primary text-dark">
                                                <th>Attribute Name</th>
                                                <th>Attribute Value</th>
                                                <th style="width: 50px;">Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody class="attribute-body-edit" id="attribute-body-{{ $detail->id }}">
                                            @php $i = 0; @endphp
                                            @forelse (json_decode($detail->attribute ?? '[]', true) as $attr)
                                                <tr>
                                                    <td>
                                                        <input type="text" name="attribute[{{ $i }}][name]"
                                                            class="form-control" placeholder="e.g., Length"
                                                            value="{{ $attr['name'] ?? '' }}">
                                                    </td>
                                                    <td>
                                                        <input type="text"
                                                            name="attribute[{{ $i }}][value]"
                                                            class="form-control" placeholder="e.g., 0.02341"
                                                            value="{{ $attr['value'] ?? '' }}">
                                                    </td>
                                                    <td class="text-center">
                                                        <button type="button"
                                                            class="btn btn-danger btn-sm remove-attribute-row-edit"
                                                            title="Hapus Baris">
                                                            <i class="icon-trash"></i>
                                                        </button>
                                                    </td>
                                                </tr>
                                                @php $i++; @endphp
                                            @empty
                                                <tr>
                                                    <td>
                                                        <input type="text" name="attribute[0][name]"
                                                            class="form-control" placeholder="e.g., Length">
                                                    </td>
                                                    <td>
                                                        <input type="text" name="attribute[0][value]"
                                                            class="form-control" placeholder="e.g., 0.02341">
                                                    </td>
                                                    <td class="text-center">
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-success">Update</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endforeach
@endsection

@section('js')
    <script>
        $("#basic-1").DataTable({
            order: [
                [0, 'asc']
            ],
        });
        $('.select2').select2({
            dropdownParent: $('#addDetailModal')
        });
    </script>

    <!-- script untuk dynamic attribute rows -->
    <script>
        $(document).ready(function() {
            let rowCount = $('#attribute-body tr').length;

            // Fungsi untuk membuat template baris baru
            function createRowTemplate(index) {
                return `
            <tr>
                <td>
                    <input type="text" name="attribute[${index}][name]" class="form-control" placeholder="e.g., Size" required>
                </td>
                <td>
                    <input type="text" name="attribute[${index}][value]" class="form-control" placeholder="e.g., Large" required>
                </td>
                <td class="text-center">
                    <button type="button" class="btn btn-danger btn-sm remove-attribute-row" title="Hapus Baris">
                        <i class="icon-trash"></i>
                    </button>
                </td>
            </tr>
        `;
            }

            // Aksi ketika tombol "Tambah Atribut" diklik
            $('#add-attribute-row').on('click', function() {
                $('#attribute-body').append(createRowTemplate(rowCount));
                rowCount++;
                updateRemoveButtons();
            });

            // Aksi ketika tombol "Hapus Baris" diklik (menggunakan delegation karena baris dibuat dinamis)
            $('#attribute-body').on('click', '.remove-attribute-row', function() {
                if ($('#attribute-body tr').length > 1) {
                    // Hapus baris terdekat
                    $(this).closest('tr').remove();
                    reindexRows();
                } else {
                    alert('Minimal harus ada satu baris atribut.');
                }
            });

            // Fungsi untuk mengatur ulang indeks input array setelah baris dihapus
            function reindexRows() {
                $('#attribute-body tr').each(function(index) {
                    $(this).find('input').each(function() {
                        let oldName = $(this).attr('name');
                        if (oldName) {
                            let newName = oldName.replace(/attributes\[\d+\]/,
                                `attributes[${index}]`);
                            $(this).attr('name', newName);
                        }
                    });
                });
                rowCount = $('#attribute-body tr').length;
                updateRemoveButtons();
            }

            function updateRemoveButtons() {
                $('.remove-attribute-row').hide();

                if ($('#attribute-body tr').length > 1) {
                    $('.remove-attribute-row').show();
                }
            }

            updateRemoveButtons();
        });
    </script>

    <script>
        $(document).ready(function() {

            // Fungsi umum untuk membuat template baris baru di modal edit
            function createEditRowTemplate(index) {
                return `
                    <tr>
                        <td>
                            <input type="text" name="attribute[${index}][name]" class="form-control" placeholder="e.g., Size" required>
                        </td>
                        <td>
                            <input type="text" name="attribute[${index}][value]" class="form-control" placeholder="e.g., Large" required>
                        </td>
                        <td class="text-center">
                            <button type="button" class="btn btn-danger btn-sm remove-attribute-row-edit" title="Hapus Baris">
                                <i class="icon-trash"></i>
                            </button>
                        </td>
                    </tr>
                `;
            }

            // Aksi ketika tombol "Tambah Atribut" di MODAL EDIT diklik (menggunakan class)
            $('.add-attribute-row-edit').on('click', function() {
                let detailId = $(this).data('detail-id');
                let $tbody = $('#attribute-body-' + detailId);
                let editRowCount = $tbody.find('tr').length;

                $tbody.append(createEditRowTemplate(editRowCount));
                updateEditRemoveButtons(detailId);
            });

            // Aksi ketika tombol "Hapus Baris" di MODAL EDIT diklik (menggunakan delegation)
            $('.attribute-body-edit').on('click', '.remove-attribute-row-edit', function() {
                let $tbody = $(this).closest('tbody');
                let detailId = $tbody.attr('id').replace('attribute-body-', '');

                if ($tbody.find('tr').length > 1) {
                    $(this).closest('tr').remove();
                    reindexEditRows(detailId); // Panggil reindex setelah hapus
                } else {
                    alert('Minimal harus ada satu baris atribut.');
                }
            });

            // Fungsi untuk mengatur ulang indeks input array di modal edit
            function reindexEditRows(detailId) {
                let $tbody = $('#attribute-body-' + detailId);
                $tbody.find('tr').each(function(index) {
                    $(this).find('input').each(function() {
                        let oldName = $(this).attr('name');
                        if (oldName) {
                            // Pastikan hanya mengganti indeks array, bukan field name
                            let newName = oldName.replace(/attribute\[\d+\]/,
                                `attribute[${index}]`);
                            $(this).attr('name', newName);
                        }
                    });
                });
                updateEditRemoveButtons(detailId);
            }

            // Fungsi untuk memperbarui tombol hapus di modal edit
            function updateEditRemoveButtons(detailId) {
                let $tbody = $('#attribute-body-' + detailId);
                $tbody.find('.remove-attribute-row-edit').hide();

                if ($tbody.find('tr').length > 1) {
                    $tbody.find('.remove-attribute-row-edit').show();
                    // Optional: Sembunyikan tombol hapus baris pertama
                    // $tbody.find('tr:first').find('.remove-attribute-row-edit').hide();
                }
            }

            // Panggil saat load untuk SEMUA modal edit
            $('.attribute-body-edit').each(function() {
                let detailId = $(this).attr('id').replace('attribute-body-', '');
                updateEditRemoveButtons(detailId);
            });
        });
    </script>
@endsection