@extends('user.layouts.app')

@section('title', 'Request Extension - ' . $booking->booking_code)

@section('content')
<link rel="stylesheet" href="{{ asset('assets/css/custom.css') }}">

<div class="container-fluid">
    <div class="ark__h1--wrap">
        <div class="page-title">
            <h1>Request Booking Extension</h1>
            <p>Extend your warehouse booking period</p>
        </div>
        <a href="{{ route('warehouse.booking.show', $booking) }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Back to Booking
        </a>
    </div>

    <div class="row mt-4">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5><i class="fas fa-calendar-plus"></i> Extension Request Form</h5>
                </div>
                <div class="card-body">
                    {{-- Current Booking Info --}}
                    <div class="alert alert-info">
                        <h6><strong>Current Booking Details</strong></h6>
                        <p class="mb-1"><strong>Booking Code:</strong> {{ $booking->booking_code }}</p>
                        <p class="mb-1"><strong>Warehouse:</strong> {{ $booking->warehouse->name }}</p>
                        <p class="mb-1"><strong>Current Period:</strong>
                            {{ $lastBooking->start_date->format('M d, Y') }} -
                            {{ $lastBooking->end_date->format('M d, Y') }} ({{ $lastBooking->rental_days }} days)
                        </p>
                        <p class="mb-0"><strong>Current Cost:</strong>
                            ${{ number_format($lastBooking->final_price, 2) }}</p>
                    </div>

                    {{-- Extension Form --}}
                    <form method="POST" action="{{ route('warehouse.booking.extend.store', $booking) }}"
                        id="extensionForm">
                        @csrf

                        <div class="form-group">
                            <label for="requested_end_date">New End Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control @error('requested_end_date') is-invalid @enderror"
                                id="requested_end_date" name="requested_end_date"
                                min="{{ $lastBooking->end_date->addDay()->format('Y-m-d') }}"
                                value="{{ old('requested_end_date') }}" required>
                            <small class="text-muted">Select a date after
                                {{ $lastBooking->end_date->format('M d, Y') }}</small>
                            @error('requested_end_date')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="user_notes">Reason for Extension (Optional)</label>
                            <textarea class="form-control" id="user_notes" name="user_notes" rows="4"
                                placeholder="Explain why you need to extend this booking..." maxlength="1000">{{ old('user_notes') }}</textarea>
                            <small class="text-muted">Maximum 1000 characters</small>
                        </div>

                        {{-- Cost Breakdown (hidden initially) --}}
                        <div id="cost_breakdown_section" style="display: none;">
                            <hr>
                            <h6 class="mb-3"><strong>Extension Cost Breakdown</strong></h6>

                            <div class="table-responsive">
                                <table class="table table-sm">
                                    <tr>
                                        <td><strong>Additional Days:</strong></td>
                                        <td class="text-end"><span id="additional_days">-</span> days</td>
                                    </tr>
                                    <tr>
                                        <td>Space Cost:</td>
                                        <td class="text-end">$<span id="space_cost">0.00</span></td>
                                    </tr>
                                    <tr>
                                        <td>Labor Cost:</td>
                                        <td class="text-end">$<span id="labor_cost">0.00</span></td>
                                    </tr>
                                    <tr>
                                        <td>Equipment Cost:</td>
                                        <td class="text-end">$<span id="equipment_cost">0.00</span></td>
                                    </tr>
                                    <tr>
                                        <td>Services Cost:</td>
                                        <td class="text-end">$<span id="services_cost">0.00</span></td>
                                    </tr>
                                    <tr class="table-active">
                                        <td><strong>Total Additional Cost:</strong></td>
                                        <td class="text-end"><strong>$<span id="total_cost">0.00</span></strong></td>
                                    </tr>
                                </table>
                            </div>

                            <div class="alert alert-warning">
                                <i class="fas fa-info-circle"></i> <strong>Note:</strong> This is a preliminary
                                estimate. Admin will review and confirm the exact cost.
                            </div>
                        </div>

                        <div class="d-flex justify-content-between mt-4">
                            <a href="{{ route('warehouse.booking.show', $booking) }}" class="btn btn-secondary">
                                <i class="fas fa-times"></i> Cancel
                            </a>
                            <button type="submit" class="btn btn-primary" id="submitBtn">
                                <i class="fas fa-paper-plane"></i> Submit Extension Request
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h6><i class="fas fa-info-circle"></i> How it Works</h6>
                </div>
                <div class="card-body">
                    <ol class="ps-3">
                        <li class="mb-2">Select your new desired end date</li>
                        <li class="mb-2">Review the calculated extension cost</li>
                        <li class="mb-2">Submit your extension request</li>
                        <li class="mb-2">Admin will review and approve/reject</li>
                        <li class="mb-0">Upon approval, pay the additional amount</li>
                    </ol>

                    <hr>

                    <h6><strong>Important Notes:</strong></h6>
                    <ul class="ps-3 small text-muted">
                        <li>Extension is subject to space availability</li>
                        <li>Admin approval is required</li>
                        <li>Same rates as original booking apply</li>
                        <li>You can only have one pending extension request at a time</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const endDateInput = document.getElementById('requested_end_date');
        const costSection = document.getElementById('cost_breakdown_section');
        const submitBtn = document.getElementById('submitBtn');

        endDateInput.addEventListener('change', function() {
            const requestedDate = this.value;

            if (!requestedDate) {
                costSection.style.display = 'none';
                return;
            }

            // AJAX calculate extension cost
            fetch('{{ route('
                    warehouse.booking.extend.calculate ', $booking) }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                        },
                        body: JSON.stringify({
                            requested_end_date: requestedDate
                        })
                    })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Update cost breakdown
                        document.getElementById('additional_days').textContent = data.data
                            .additional_days;
                        document.getElementById('space_cost').textContent = parseFloat(data.data
                            .additional_space_cost).toFixed(2);
                        document.getElementById('labor_cost').textContent = parseFloat(data.data
                            .additional_labor_cost).toFixed(2);
                        document.getElementById('equipment_cost').textContent = parseFloat(data.data
                            .additional_equipment_cost).toFixed(2);
                        document.getElementById('services_cost').textContent = parseFloat(data.data
                            .additional_services_cost).toFixed(2);
                        document.getElementById('total_cost').textContent = parseFloat(data.data
                            .additional_amount).toFixed(2);

                        // Show cost breakdown
                        costSection.style.display = 'block';
                        submitBtn.disabled = false;
                    } else {
                        alert(data.message || 'Error calculating extension cost');
                        costSection.style.display = 'none';
                        submitBtn.disabled = true;
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Failed to calculate extension cost. Please try again.');
                    costSection.style.display = 'none';
                    submitBtn.disabled = true;
                });
        });
    });
</script>
@endpush

@endsection