@extends('layouts.master')
@section('title', 'Souvenir Request Summary Form')

@section('script')
    <script>
        function toggleAddress() {
            const method = document.querySelector('input[name="order_delivery_method"]:checked')?.value;

            const addressBox = document.getElementById('addressBox');
            const addressInput = document.getElementById('order_address');

            const divisionBox = document.getElementById('divisionBox');
            const divisionSelect = document.getElementById('order_division');
            const divisionNameInput = document.getElementById('division_name');

            if (method === 'self') {
                addressBox.style.display = 'block';
                addressInput.required = true;
                divisionBox.style.display = 'none';
            } else if (method === 'division') {
                addressBox.style.display = 'none';
                addressInput.required = false;
                addressInput.value = '';
                divisionBox.style.display = 'block';

                if (divisionSelect) {
                    const selectedText = divisionSelect.options[divisionSelect.selectedIndex]?.text || '';
                    divisionNameInput.value = selectedText;
                }
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('input[name="order_delivery_method"]').forEach(el => {
                el.addEventListener('change', toggleAddress);
            });

            const divisionSelect = document.getElementById('order_division');
            if (divisionSelect) {
                divisionSelect.addEventListener('change', function() {
                    const divisionNameInput = document.getElementById('division_name');
                    const selectedText = this.options[this.selectedIndex]?.text || '';
                    divisionNameInput.value = selectedText;
                });
            }

            toggleAddress();
        });
    </script>
@endsection

@section('content')
    @include('layouts.sidebar')
    @include('layouts.header-sub')

    <section class="wrapper bg-light">
        <div class="container py-14 py-md-16">

            <div class="col-md-12 mb-3">
                <h5 class="display-1" style="font-size: 30px">@yield('title')</h5>
            </div>

            <div class="card">
                <div class="card-body">

                    <form action="{{ route('requestsummaryformsubmit', $order->order_id) }}" method="POST">
                        @csrf

                        {{-- Order Code --}}
                        <div class="d-flex justify-content-end mb-3">
                            <div class="text-end">
                                <span class="fw-bold">เลขที่คำขอเบิก</span>
                                <div class="card mt-1">
                                    <div class="card-body py-1 px-2">
                                        <span class="text-primary">{{ $order->order_code }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Error --}}
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                @foreach ($errors->all() as $error)
                                    <div>{{ $error }}</div>
                                @endforeach
                            </div>
                        @endif

                        {{-- 🔥 แจ้ง Premium --}}
                        @if ($hasPremium)
                            <div class="alert alert-warning">
                                กรุณาระบุวัตถุประสงค์สำหรับรายการ <b>Premium</b> เท่านั้น
                            </div>
                        @endif

                        {{-- TABLE --}}
                        <div class="table-responsive">
                            <table class="table table-bordered align-middle">
                                <thead class="table-light text-center">
                                    <tr>
                                        <th>No.</th>
                                        <th>Image</th>
                                        <th>Name</th>
                                        <th>Qty</th>
                                        <th>Unit Price</th>
                                        <th>Total</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @foreach ($products as $i => $item)
                                        <tr>
                                            <td class="text-center">{{ $i + 1 }}</td>

                                            <td class="text-center">
                                                <img src="{{ $item->product_image ? asset('product_images/' . $item->product_image) : asset('images/no-image.png') }}"
                                                    class="img-thumbnail" style="width:60px;height:60px;">

                                                @if ($item->product_type == '7')
                                                    <div class="mt-1">
                                                        <span class="badge bg-warning text-dark">Premium</span>
                                                    </div>
                                                @endif
                                            </td>

                                            <td>{{ $item->product_name }}</td>
                                            <td class="text-center">{{ $item->quantity }}</td>
                                            <td class="text-end">{{ number_format($item->product_current_unit_price, 2) }}
                                            </td>
                                            <td class="text-end">
                                                {{ number_format($item->quantity * $item->product_current_unit_price, 2) }}
                                            </td>
                                        </tr>

                                        {{-- 🔥 PURPOSE เฉพาะ Premium --}}
                                        @if ($item->product_type == '7')
                                            <tr>
                                                <td colspan="6">
                                                    <label class="fw-bold">
                                                        Purpose for {{ $item->product_name }} ({{ $item->quantity }} pcs)
                                                        <span class="text-danger">*</span>
                                                    </label>

                                                    <textarea name="item_purpose[{{ $item->order_item_id }}]" class="form-control mt-2" rows="2"
                                                        placeholder="ระบุวัตถุประสงค์ของของที่ระลึกนี้..." required>{{ old('item_purpose.' . $item->order_item_id, $item->item_purpose ?? '') }}</textarea>
                                                </td>
                                            </tr>
                                        @endif
                                    @endforeach
                                    <tr class="table-light">
                                        <td colspan="3" class="text-end fw-bold">Total Qty</td>
                                        <td class="text-center fw-bold">{{ $totalQty }}</td>
                                        <td class="text-end fw-bold">Total</td>
                                        <td class="text-end fw-bold">{{ number_format($total, 2) }}</td>
                                    </tr>

                                </tbody>
                            </table>
                        </div>
                        
                        <br>

                        <input type="hidden" name="order_id" value="{{ $order->order_id }}">

                        {{-- FORM --}}
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="fw-bold">Firstname - Lastname</label>
                                <input type="text" name="order_customer_name" class="form-control"
                                    value="{{ old('order_customer_name', $order->user_fullname) }}" required>
                            </div>

                            <div class="col-md-6">
                                <label class="fw-bold">Division</label>
                                <select name="order_division" id="order_division" class="form-select" required>
                                    <option value="">-- Select --</option>
                                    @foreach ($divisions as $d)
                                        <option value="{{ $d->school_division_id }}"
                                            {{ old('order_division', $order->user_division_id) == $d->school_division_id ? 'selected' : '' }}>
                                            {{ $d->school_division_name_en }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="fw-bold">Email</label>
                                <input type="email" name="order_email" class="form-control"
                                    value="{{ old('order_email', auth()->user()->email) }}">
                            </div>

                            <div class="col-md-6">
                                <label class="fw-bold">Overall Purpose (optional)</label>
                                <input type="text" name="order_purpose" class="form-control"
                                    value="{{ old('order_purpose', $order->order_purpose) }}">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label class="fw-bold">Request Date</label>
                                <input type="date" name="order_request_date" class="form-control"
                                    value="{{ old('order_request_date', \Carbon\Carbon::parse($order->order_request_date)->format('Y-m-d')) }}"
                                    required>
                            </div>

                            <div class="col-md-4">
                                <label class="fw-bold">Receive Date</label>
                                <input type="date" name="order_receive_date" class="form-control"
                                    value="{{ old('order_receive_date') }}">
                            </div>

                            <div class="col-md-4">
                                <label class="fw-bold">Use Date</label>
                                <input type="date" name="order_use_date" class="form-control"
                                    value="{{ old('order_use_date') }}">
                            </div>
                        </div>

                        {{-- DELIVERY --}}
                        <div class="mb-3">
                            <label class="fw-bold">Delivery Method</label>

                            <div class="form-check">
                                <input type="radio" name="order_delivery_method" value="self" class="form-check-input"
                                    checked onchange="toggleAddress()">
                                <label class="form-check-label">Self Pickup</label>
                            </div>

                            <div id="addressBox" class="mt-2">
                                <textarea name="order_address" id="order_address" class="form-control" placeholder="Enter address">{{ old('order_address', $order->order_address) }}</textarea>
                            </div>

                            <div class="form-check mt-2">
                                <input type="radio" name="order_delivery_method" value="division"
                                    class="form-check-input" onchange="toggleAddress()">
                                <label class="form-check-label">Send to Division</label>
                            </div>

                            <div id="divisionBox" class="mt-2" style="display:none;">
                                <input type="text" id="division_name" class="form-control" readonly>
                            </div>
                        </div>

                        {{-- SUBMIT --}}
                        <div class="text-center mt-4">
                            <button type="submit" class="btn btn-success">
                                Submit Request
                            </button>

                            <a href="javascript:history.back()" class="btn btn-danger">
                                Cancel
                            </a>
                        </div>

                    </form>

                </div>
            </div>

        </div>
    </section>

    @include('layouts.footer')
@endsection