@extends('layouts.app')

@section('content')
    <div class="row">
        <div class="card">
            <div class="card-header pb-0">
                <div class="product-page-details">
                    <h3 class="f-w-600">Order Production No : {{ $orderProduction->no }}</h3>
                    <p class="mt-1">Date : {{ $orderProduction->formatted_date }}</p>
                </div>
            </div>
            <div class="card-body">
                <table class="product-page-width">
                    <tbody>
                        <tr>
                            <td><b>PO Buyer No</b></td>
                            <td class="ps-1">:</td>
                            <td class="ps-3">{{ $orderProduction->obDetail->ob->po->no }}</td>
                        </tr>
                        <tr>
                            <td><b>PO Buyer Date</b></td>
                            <td class="ps-1">:</td>
                            <td class="ps-3">{{ $orderProduction->obDetail->ob->po->formatted_date }}</td>
                        </tr>
                        <tr>
                            <td><b>OB No</b></td>
                            <td class="ps-1">:</td>
                            <td class="ps-3">{{ $orderProduction->obDetail->ob->no }}</td>
                        </tr>
                        <tr>
                            <td><b>OB Date</b></td>
                            <td class="ps-1">:</td>
                            <td class="ps-3">{{ $orderProduction->obDetail->ob->formatted_date }}</td>
                        </tr>
                        <tr>
                            <td><b>Size</b></td>
                            <td class="ps-1">:</td>
                            <td class="ps-3">{{ $orderProduction->obDetail->size }}</td>
                        </tr>
                        <tr>
                            <td><b>Color Code</b></td>
                            <td class="ps-1">:</td>
                            <td class="ps-3">{{ $orderProduction->obDetail->color_code }}</td>
                        </tr>
                        <tr>
                            <td><b>Qty</b></td>
                            <td class="ps-1">:</td>
                            <td class="ps-3">{{ $orderProduction->obDetail->qty }}</td>
                        </tr>
                        <tr>
                            <td><b>BOM</b></td>
                            <td class="ps-1">:</td>
                            <td class="ps-3">
                                <a href="/storage/{{ $orderProduction->obDetail->bom_path }}">
                                    {{ $orderProduction->obDetail->bom_filename }}
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="">
                        <h4>Order Production : List</h4>
                        <p class="f-m-light mt-1">Order Production List for this Production Card</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        @if ($orderProduction->boms->isEmpty())
            <div class="card col-md-3" style="min-height: auto;">
                <div class="card-header">
                    <h4>Add new Order Production</h4>
                </div>
                <div class="card-body animated-dropfile">
                    <div class="row">
                        <a href="{{ route('bom.create', $orderProduction) }}">
                            <div
                                class="col-md-12 col-md-offset-3 text-center d-flex justify-content-center align-items-center gap-3">
                                <div class="btn-container">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round"
                                        class="icon icon-tabler icons-tabler-outline icon-tabler-circle-plus">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" />
                                        <path d="M9 12h6" />
                                        <path d="M12 9v6" />
                                    </svg>
                                </div>
                                <div class="text-dark">
                                    or
                                    <a href="#" data-bs-toggle="modal" data-bs-target="#import-bom-template">
                                        Import Order Production Template
                                    </a>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        @else
            <div class="row justify-content-center">
                @foreach ($orderProduction->boms as $bom)
                    <div class="col-md-6">
                        <div class="card" style="min-height: auto;">
                            <div class="card-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h5>No : <b>{{ $bom->no }}</b></h5>
                                    @switch($bom->is_subcon)
                                        @case(true)
                                            <span class="badge bg-info">Subcon</span>
                                        @break

                                        @default
                                    @endswitch
                                    @switch($bom->type)
                                        @case('BOM')
                                            <span class="badge bg-success">Main</span>
                                        @break

                                        @case('SUBBOM')
                                            <span class="badge bg-secondary">Sub</span>
                                        @break

                                        @default
                                    @endswitch
                                </div>
                            </div>
                            <div class="card-body animated-dropfile">
                                <div class="table-responsive theme-scrollbar">
                                    <table class="display w-100">
                                        <tr>
                                            <td>Order Production Alias</td>
                                            <td class="ps-1">:</td>
                                            <td class="ps-3"><b>{{ $bom->alias }}</b></td>
                                        </tr>
                                        <tr>
                                            <td>Date</td>
                                            <td class="ps-1">:</td>
                                            <td class="ps-3"><b>{{ $bom->formatted_date }}</b></td>
                                        </tr>
                                        <tr>
                                            <td>Material Fullname</td>
                                            <td class="ps-1">:</td>
                                            <td class="ps-3"><b>{{ $bom->material->formatted_material }}</b></td>
                                        </tr>
                                        <tr>
                                            <td>Material Code</td>
                                            <td class="ps-1">:</td>
                                            <td class="ps-3"><b>{{ $bom->material_code }}</b></td>
                                        </tr>
                                        <tr>
                                            <td>Material Type Code</td>
                                            <td class="ps-1">:</td>
                                            <td class="ps-3"><b>{{ $bom->material->material_type_code }}</b></td>
                                        </tr>
                                        <tr>
                                            <td>Qty</td>
                                            <td class="ps-1">:</td>
                                            <td class="ps-3"><b>{{ $bom->qty }}</b></td>
                                        </tr>
                                        <tr>
                                            <td>Material UoM</td>
                                            <td class="ps-1">:</td>
                                            <td class="ps-3"><b>{{ $bom->material->uom_code }}</b></td>
                                        </tr>
                                        <tr>
                                            <td>Lead Time</td>
                                            <td class="ps-1">:</td>
                                            <td class="ps-3"><b>{{ $bom->lead_time }} day(s)</b></td>
                                        </tr>
                                        <tr>
                                            <td>Start Date</td>
                                            <td class="ps-1">:</td>
                                            <td class="ps-3"><b>{{ $bom->start_date }}</b></td>
                                        </tr>
                                        <tr>
                                            <td>Level</td>
                                            <td class="ps-1">:</td>
                                            <td class="ps-3"><b>{{ $bom->level }}</b></td>
                                        </tr>
                                        <tr>
                                            <td>Labor Per Unit</td>
                                            <td class="ps-1">:</td>
                                            <td class="ps-3"><b>{{ $bom->labor_per_unit }}</b></td>
                                        </tr>
                                        <tr>
                                            <td>PIC</td>
                                            <td class="ps-1">:</td>
                                            <td class="ps-3"><b>{{ $bom->createdBy->full_contact }}</b></td>
                                        </tr>
                                        <tr>
                                            <td>Work Order No</td>
                                            <td class="ps-1">:</td>
                                            <td class="ps-3">
                                                @if (isset($bom->work_order_no))
                                                    <span class="badge badge-success">{{ $bom->work_order_no }}</span>
                                                @else
                                                    <span class="badge badge-warning">Please approve this bom</span>
                                                @endif
                                            </td>
                                        </tr>
                                        @if ($bom->approved_by)
                                            <tr>
                                                <td>Approved By</td>
                                                <td class="ps-1">:</td>
                                                <td class="ps-3"><b>{{ $bom->approvedBy->full_contact }}</b></td>
                                            </tr>
                                        @endif
                                    </table>
                                </div>
                            </div>
                            <hr>
                            <div class="d-flex justify-content-end me-3 mb-3">
                                <a href="{{ route('bom.edit', $bom) }}">
                                    <button class="btn btn-primary">
                                        Add Material / Edit
                                    </button>
                                </a>
                            </div>
                            @if (!$bom->details->isEmpty())
                                <div class="table-responsive">
                                    <table class="table table-hover table-bordered table-striped"
                                        id="basic-{{ $bom->id }}">
                                        <thead>
                                            <tr class="bg-light-primary text-dark">
                                                <th>Material Fullname</th>
                                                <th>Material Code</th>
                                                <th>UoM</th>
                                                <th>Type</th>
                                                <th>Consumption</th>
                                                <th>Sub Total</th>
                                                <th>Extra Purchase</th>
                                                <th>Total</th>
                                                <th>Volume</th>
                                                <th>MTO/MTS</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($bom->details as $detail)
                                                <tr>
                                                    <td>{{ $detail->material->formatted_material }}</td>
                                                    <td>{{ $detail->material_code }}</td>
                                                    <td>{{ $detail->material->uom_code }}</td>
                                                    <td>{{ $detail->material->material_type_code }}</td>
                                                    <td>{{ $detail->consumption }}</td>
                                                    <td>{{ $detail->sub_total }}</td>
                                                    <td>{{ $detail->extra_purchase }} %</td>
                                                    <td>{{ $detail->total }}</td>
                                                    <td>{{ $detail->volume }}</td>
                                                    <td>{{ $detail->mtomts }}</td>
                                                    <td>
                                                        @switch($detail->mtomts)
                                                            @case('MTO')
                                                                <div class="d-flex justify-content-start gap-3">
                                                                    <div class="">
                                                                        <a
                                                                            href="{{ route('sub-bom.create', ['bom_detail' => $detail, 'material' => $detail->material_code, 'level' => $detail->level + 1]) }}">
                                                                            <button class="btn btn-sm btn-primary">
                                                                                Add Sub
                                                                            </button>
                                                                        </a>
                                                                    </div>
                                                                    <div class="">
                                                                        <button class="btn btn-sm btn-info" data-bs-toggle="modal"
                                                                            data-bs-target="#import-bom-sub"
                                                                            onclick="openImportSubModal({{ $detail->id }})">
                                                                            Import Sub
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            @break

                                                            @case('SUBCON')
                                                                <div class="flex justify-content-start gap-3">
                                                                    <div class="">
                                                                        <a
                                                                            href="{{ route('sub-bom.create', [$detail, 'subcon' => true]) }}">
                                                                            <button class="btn btn-sm btn-primary">
                                                                                Create Sub Order Production
                                                                            </button>
                                                                        </a>
                                                                    </div>
                                                                    <div class=""></div>
                                                                </div>
                                                            @break

                                                            @default
                                                        @endswitch
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                    <script>
                                        $("#basic-{{ $bom->id }}").DataTable();
                                    </script>
                                </div>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>

    <!-- Modal Import if boms null -->
    @if ($orderProduction->boms->isEmpty())
        <div class="modal fade" id="import-bom-template" tabindex="-1" aria-labelledby="editModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editModalLabel">
                            Import Order Production from Template
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form action="{{ route('bom.import', $orderProduction) }}" method="POST">
                        @csrf
                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="bom_template_no" class="form-label required">Select Order Production
                                    Template</label>
                                <select class="form-select" id="bom_template_no" name="bom_template_no" required>
                                    <option value="">-- Select --</option>
                                    @foreach ($bomTemplates as $bomTemplate)
                                        <option value="{{ $bomTemplate->no }}">{{ $bomTemplate->full_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="qty" class="form-label required">Qty</label>
                                <input type="text" class="form-control" id="qty" name="qty" required>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary cancel-button"
                                data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-success" type="submit">
                                Import
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif

    <!-- Save to make Order Production -->
    @if (!$orderProduction->boms->isEmpty())
        <div class="row">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="">
                            <h4>Order Production : save</h4>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    @if (!$orderProduction->boms->isEmpty())
                        <form action="{{ route('bom-template.store', $orderProduction) }}" method="POST">
                            @csrf
                            <div class="d-flex justify-content-between">
                                <button class="btn btn-info" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#create">
                                    Save as template
                                </button>
                            </div>
                            <div class="d-flex justify-content-start">
                                <div class="collapse multi-collapse dark-accordion" id="create">
                                    <div class="card card-body mt-3 mb-0 collapse-wrapper accordion-light-primary">
                                        <p>Please fill detail below</p>
                                        <hr>
                                        <div class="">
                                            <label for="name" class="form-label required">Order Production Template
                                                Name</label>
                                            <input type="text" name="name"
                                                class="form-control @error('name') is-invalid @enderror" id="name"
                                                required>
                                            @error('name')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="mt-3">
                                            <label for="desc" class="form-label">Description</label>
                                            <input type="text" name="desc"
                                                class="form-control @error('desc') is-invalid @enderror" id="desc">
                                            @error('desc')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="d-flex justify-content-between gap-3 mt-3">
                                            <button class="btn btn-success" type="submit">
                                                Save
                                            </button>
                                            <button class="btn btn-secondary" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#create">
                                                Cancel
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    @else
                        <div class="">
                            <button class="btn btn-info" type="button" disabled>
                                Save as template
                            </button>
                        </div>
                        <small class="text-warning">
                            Please complete the Order Production before you can save as template
                        </small>
                    @endif
                </div>
            </div>
        </div>
    @endif

    <!-- Import Sub Modal -->
    @if (!$orderProduction->boms->isEmpty())
        <div class="modal fade" id="import-bom-sub" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editModalLabel">
                            Import Order Production from Template
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="bom_template_no" class="form-label required">
                                Select Order Production Template
                            </label>
                            <select class="form-select" id="bom_template_no" name="bom_template_no" required>
                                <option value="">-- Select --</option>
                                @foreach ($bomTemplates as $bomTemplate)
                                    <option value="{{ $bomTemplate->no }}">{{ $bomTemplate->full_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="qty" class="form-label required">Qty</label>
                            <input type="text" class="form-control" id="qty" name="qty" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary cancel-button"
                            data-bs-dismiss="modal">Cancel</button>
                        <button id="import-button" class="btn btn-success" onclick="submitImportSub()">
                            Import
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif

@endsection

@section('js')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let importBomSubModal = document.getElementById("import-bom-sub");

            importBomSubModal.addEventListener("hidden.bs.modal", function() {
                document.body.classList.remove("modal-open");
                let modalBackdrops = document.getElementsByClassName("modal-backdrop");
                while (modalBackdrops.length > 0) {
                    modalBackdrops[0].remove();
                }
            });
        });
    </script>

    <script>
        var id;

        function openImportSubModal(selectedId) {
            this.id = selectedId;
            let modal = new bootstrap.Modal(document.getElementById('import-bom-sub'));
            modal.show();
        }

        function submitImportSub() {
            let bom_template_no = $('#bom_template_no').val();
            let qty = $('#qty').val();
            let url = "{{ route('sub-bom.import') }}";

            let button = $('#import-button');
            let originalText = button.html();

            // Nonaktifkan tombol dan ubah teksnya
            button.prop('disabled', true).html('Processing...');

            $.ajax({
                type: 'POST',
                url: url,
                data: {
                    _token: "{{ csrf_token() }}",
                    bom_detail_id: this.id,
                    bom_template_no: bom_template_no,
                    qty: qty
                },
                success: function(data) {
                    alert("Sub OP successfully added");
                    window.location.reload();
                },
                error: function(xhr, status, error) {
                    let response = JSON.parse(xhr.responseText);
                    let errorMessage = response.message || "An unknown error occurred.";

                    if (response.errors && response.errors.qty) {
                        errorMessage = response.errors.qty[0];
                    }

                    alert('Error: ' + errorMessage);

                    button.prop('disabled', false).html(originalText);
                }

            });
        }
    </script>
@endsection