@extends('layouts.app')

@section('css')
    <link rel="stylesheet" type="text/css" href="/assets/css/vendors/flatpickr/flatpickr.min.css">
@endsection

@section('content')
    <div class="row">
        <div class="card">
            <div class="card-header">

                <div class="d-flex justify-content-between align-items-center">
                    <div class="">
                        <h4>Schedule : edit</h4>
                        <p class="f-m-light mt-1">Page for edit Schedule</p>
                    </div>
                    <div class="">

                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive theme-scrollbar">
                    <table class="display">
                        <tr>
                            <td>Production Card No</td>
                            <td class="ps-1">:</td>
                            <td class="ps-3"><b>{{ $workOrderDateRange->productionCard->no }}</b></td>
                        </tr>
                        <tr>
                            <td>Date</td>
                            <td class="ps-1">:</td>
                            <td class="ps-3"><b>{{ $workOrderDateRange->productionCard->date }}</b></td>
                        </tr>
                        <tr>
                            <td>BOM No</td>
                            <td class="ps-1">:</td>
                            <td class="ps-3"><b>{{ $workOrderDateRange->productionCard->bom_template_no }}</b></td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="card-footer">
                <div class="d-flex justify-content-between">
                    <div class="">
                        <a href="{{ route('schedule.index') }}">
                            <button class="btn btn-secondary" type="button">
                                Back
                            </button>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h5 class="card-title">Finish Goods</h5>
            <p class="f-m-light mt-1">List Finish Good for this Production Card</p>
        </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>Finish Good Code</th>
                            <th>Finish Good Name</th>
                            <th>UoM</th>
                            <th>Color</th>
                            <th>Target Qty</th>
                            <th>Remarks</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($workOrderDateRange->productionCard->headers as $header)
                            <tr>
                                <td>{{ $header->finish_good_code }}</td>
                                <td>{{ $header->finishGood->name }}</td>
                                <td>{{ $header->finishGood->uom_code }}</td>
                                <td>{{ $header->finishGood->color_code }}</td>
                                <td>{{ $header->target_qty }}</td>
                                <td>{{ $header->remarks }}</td>
                                <td>
                                    <button class="btn btn-sm btn-primary" onclick="showDetails({{ $header->id }})">
                                        Show Details
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <div class="">
                    <h5 class="card-title">Work Order Schedule</h5>
                    <p class="f-m-light mt-1">List Work Order Schedule for this Production Card</p>
                </div>
                <div class="">
                    <button class="btn btn-outline-warning" type="button" data-bs-toggle="modal"
                        data-bs-target="#changeScheduleModal">
                        Change Schedule
                    </button>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive theme-scrollbar">
                <table class="display">
                    <tr>
                        <td>Start Date</td>
                        <td class="ps-1">:</td>
                        <td class="ps-3"><b>{{ $workOrderDateRange->formatted_start_date }}</b></td>
                    </tr>
                    <tr>
                        <td>End Date</td>
                        <td class="ps-1">:</td>
                        <td class="ps-3"><b>{{ $workOrderDateRange->formatted_end_date }}</b></td>
                    </tr>
                </table>
            </div>
            <hr>
            <div class="">
                <form action="{{ route('work-order.store', $workOrderDateRange) }}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-md-4">
                            <label for="finish_good_code" class="form-label required">Select Finish Good</label>
                            <select name="finish_good_code" id="finish_good_code"
                                class="form-select @error('finish_good_code') is-invalid @enderror" required>
                                <option value="">-- Select --</option>
                                @foreach ($finishGoods as $finishGood)
                                    <option value="{{ $finishGood->code }}">
                                        {{ $finishGood->formatted_material }}
                                    </option>
                                @endforeach
                            </select>
                            @error('finish_good_code')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label for="divisi_from" class="form-label required">Divisi From</label>
                            <select name="divisi_from" id="divisi_from"
                                class="form-select @error('divisi_from') is-invalid @enderror" required>
                                <option value="">-- Select --</option>
                                @foreach ($divisis as $divisi)
                                    <option value="{{ $divisi->code }}">{{ $divisi->code }}</option>
                                @endforeach
                            </select>
                            @error('divisi_from')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label for="divisi_destination" class="form-label required">Divisi Destination</label>
                            <select name="divisi_destination" id="divisi_destination"
                                class="form-select @error('divisi_destination') is-invalid @enderror" required>
                                <option value="">-- Select --</option>
                                @foreach ($divisis as $divisi)
                                    <option value="{{ $divisi->code }}">{{ $divisi->code }}</option>
                                @endforeach
                            </select>
                            @error('divisi_destination')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <div class="col-md-4 mt-3">
                            <label for="qty_target" class="form-label required">Qty Target</label>
                            <input type="numeric" class="form-control @error('qty_target') is-invalid @enderror"
                                name="qty_target" id="qty_target" required>
                            @error('qty_target')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <div class="col-md-4 mt-3">
                            <label for="output_code" class="form-label required">Select Ouput</label>
                            <select class="form-select @error('output_code') is-invalid @enderror" name="output_code"
                                id="output_code" required>
                                <option value="">-- Select --</option>
                                @foreach ($outputs as $output)
                                    <option value="{{ $output['material_code'] }}">
                                        {{ $output['material_name'] }}
                                    </option>
                                @endforeach
                            </select>
                            @error('output_code')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                    </div>
                    <div class="d-flex justify-content-end mt-3">
                        <button class="btn btn-success" type="submit">
                            Add Work Order
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="table-responsive theme-scrollbar mt-3">
                <table class="table table-hover table-bordered" id="basic-2">
                    <thead>
                        <tr class="bg-light-warning text-dark">
                            {{-- <th class="bg-secondary border-white align-middle">Action</th> --}}
                            <th class="d-none"></th>
                            <th>Work Order No</th>
                            <th>Finish Good Code</th>
                            <th>Finish Good Name</th>
                            <th>Finish Good UoM</th>
                            <th>Finish Good Color</th>
                            <th>Divisi From</th>
                            <th></th>
                            <th>Divisi Destination</th>
                            <th>Qty Target</th>
                            <th>Output Code</th>
                            <th>Output Name</th>
                            <th>Output UoM</th>
                            <th>Output Color</th>
                            <th>Show Material</th>
                            <th>Print</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($workOrderDateRange->workOrders as $wo)
                            <tr>
                                <td class="d-none">{{ $wo->id }}</td>
                                <td><b>{{ $wo->no }}</b></td>
                                <td>{{ $wo->finish_good_code }}</td>
                                <td>{{ $wo->finishGood->name }}</td>
                                <td>{{ $wo->finishGood->uom_code }}</td>
                                <td>{{ $wo->finishGood->color_code }}</td>
                                <td>{{ $wo->divisi_from }}</td>
                                <td>
                                    <i class="icon-arrow-right text-primary"></i>
                                </td>
                                <td>{{ $wo->divisi_destination }}</td>
                                <td>{{ $wo->qty_target }}</td>
                                <td>{{ $wo->output_code }}</td>
                                <td>{{ $wo->output->name }}</td>
                                <td>{{ $wo->output->uom_code }}</td>
                                <td>{{ $wo->output->color_code }}</td>
                                <td>
                                    <button class="btn btn-sm btn-primary" onclick="showMaterials({{ $wo->id }})">
                                        Show Material
                                    </button>
                                </td>
                                <td>
                                    <a href="{{ route('schedule.print', ['work_order_date_range' => $workOrderDateRange->id, 'id' => $wo->id]) }}"
                                        target="_blank" class="btn btn-sm btn-info">
                                        Print
                                    </a>
                                </td>
                                <td>
                                    <ul class="action">
                                        <li class="edit">
                                            <button class="btn btn-icon" data-bs-toggle="modal"
                                                data-bs-target="#edit-{{ $wo->id }}">
                                                <i class="icon-pencil-alt"></i>
                                            </button>
                                        </li>
                                        <li class="delete">
                                            @if (count($wo->transferRequestDetails) < 1)
                                                <button class="btn btn-icon" data-bs-toggle="collapse"
                                                    data-bs-target="#delete-{{ $wo->id }}">
                                                    <i class="icon-trash"></i>
                                                </button>
                                                <div class="collapse multi-collapse dark-accordion"
                                                    id="delete-{{ $wo->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('work-order.schedule.destroy', $wo) }}"
                                                                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-{{ $wo->id }}">
                                                                Cancel
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        </li>
                                    </ul>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Show Details Modal -->
    <div class="modal fade" id="detailsModal" tabindex="-1" aria-labelledby="detailsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="detailsModalLabel">Material Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="content"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Change Schedule Modal -->
    <!-- Change Start Date and End Date -->
    <div class="modal fade" id="changeScheduleModal" tabindex="-1" aria-labelledby="changeScheduleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="changeScheduleModalLabel">Change Schedule</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('schedule.update', $workOrderDateRange) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="start_date" class="form-label required">Start Date</label>
                            <input type="date" class="form-control" id="start_date" name="start_date"
                                value="{{ $workOrderDateRange->start_date }}" required>
                        </div>
                        <div class="mb-3">
                            <label for="end_date" class="form-label required">End Date</label>
                            <input type="date" class="form-control" id="end_date" name="end_date"
                                value="{{ $workOrderDateRange->end_date }}" required>
                        </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-primary">Update schedule</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Edit Qty Target Modal -->
    @foreach ($workOrderDateRange->workOrders as $workOrder)
        <div class="modal fade" id="edit-{{ $workOrder->id }}" tabindex="-1"
            aria-labelledby="editLabel-{{ $workOrder->id }}" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editLabel-{{ $workOrder->id }}">Edit Qty Target</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="">
                            <p class="">Work Order No : <b>{{ $workOrder->no }}</b></p>
                        </div>
                        <form action="{{ route('work-order.update-target-qty', $workOrder) }}" method="POST">
                            @csrf
                            <div class="modal-body">
                                <div class="mb-3">
                                    <label for="qty_target_{{ $workOrder->id }}" class="form-label required">Qty
                                        Target</label>
                                    <input type="number" class="form-control" id="qty_target_{{ $workOrder->id }}"
                                        name="qty_target" value="{{ $workOrder->qty_target }}" required>
                                </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-primary">Update Qty Target</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
@endsection

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

    <script>
        function showDetails(id) {
            $.ajax({
                url: `/ajax/production-card/details`,
                method: 'GET',
                data: {
                    production_card_header_id: id
                },
                success: function(response) {
                    if (response.status && Array.isArray(response.data) && response.data.length > 0) {
                        let contentHtml = `
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr class="bg-light-primary text-dark">
                                    <th>Divisi Code</th>
                                    <th>Material Code</th>
                                    <th>Material Name</th>
                                    <th>Material UOM</th>
                                    <th>Material Color</th>
                                    <th>Consumption</th>
                                    <th>Total Quantity</th>
                                </tr>
                            </thead>
                            <tbody>
                    `;

                        response.data.forEach(item => {
                            contentHtml += `
                            <tr>
                                <td>${item.divisi_code}</td>
                                <td>${item.material_code}</td>
                                <td>${item.material_name}</td>
                                <td>${item.material_uom}</td>
                                <td>${item.material_color}</td>
                                <td>${item.consumption}</td>
                                <td>${item.total_qty}</td>
                            </tr>
                        `;
                        });

                        contentHtml += `
                            </tbody>
                        </table>
                    `;

                        $('#detailsModal .modal-body #content').html(contentHtml);
                        $('#detailsModal').modal('show');
                    } else {
                        $('#detailsModal .modal-body #content').html(
                            '<p>No details found for this production card.</p>');
                        $('#detailsModal').modal('show');
                    }
                },
                error: function() {
                    alert('Failed to load details.');
                }
            });
        }
    </script>

    <script>
        function showMaterials(id) {
            $.ajax({
                url: `/ajax/work-order/details`,
                method: 'GET',
                data: {
                    wo_id: id
                },
                success: function(response) {
                    let contentHtml = '';

                    if (response.status && Array.isArray(response.data) && response.data.length > 0) {
                        let i = 0;
                        contentHtml = `
                        <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="basic-5" style="width:100%">
                            <thead>
                                <tr class="bg-light-primary text-dark">
                                    <th>No</th>
                                    <th>Material Code</th>
                                    <th>Material Name</th>
                                    <th>Material UOM</th>
                                    <th>Material Color</th>
                                    <th>Consumption</th>
                                    <th>Qty</th>
                                </tr>
                            </thead>
                            <tbody>
                        `;

                        response.data.forEach(item => {
                            contentHtml += `
                        <tr>
                            <td>${++i}</td>
                            <td>${item.material_code}</td>
                            <td>${item.material_name}</td>
                            <td>${item.material_uom}</td>
                            <td>${item.material_color}</td>
                            <td>${item.consumption}</td>
                            <td>${item.total}</td>
                        </tr>
                    `;
                        });

                        contentHtml += `
                            </tbody>
                        </table>
                    </div>
                `;
                    } else {
                        contentHtml =
                            '<p class="text-center">No details found for this SPK or maybe you put wrong divisi from.</p>';
                    }

                    // 1. Masukkan HTML ke modal
                    $('#detailsModal .modal-body #content').html(contentHtml);

                    // 2. Tampilkan Modal
                    $('#detailsModal').modal('show');

                    // 3. Inisialisasi DataTable SETELAH modal muncul atau HTML terpasang
                    if (response.data.length > 0) {
                        // Hancurkan datatable lama jika sudah pernah ada sebelumnya
                        if ($.fn.DataTable.isDataTable('#basic-5')) {
                            $('#basic-5').DataTable().destroy();
                        }

                        // Inisialisasi ulang
                        $('#basic-5').DataTable({
                            "paging": true,
                            "ordering": true,
                            "info": true,
                            "searching": true,
                            "responsive": true,
                            "order": [
                                [0, "asc"]
                            ]
                        });
                    }
                },
                error: function() {
                    alert('Failed to load details.');
                }
            });
        }
    </script>
@endsection