@extends('layouts.app')

@section('content')

@if(session('success'))
    <div id="successToast"><i class="fa fa-check-circle"></i> {{ session('success') }}</div>
@endif

<div class="card">

    {{-- Card Header --}}
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3><i class="fa fa-plus-circle"></i> Add Package</h3>
        <a href="{{ route('holiday.packages') }}" class="btn btn-light-primary btn-sm px-4">
            <i class="fa fa-list me-1"></i> View All
        </a>
    </div>

    {{-- Breadcrumb --}}
    <div class="card-header border-bottom-0 px-4 py-2" style="border-top: 1px solid #f1f1f4;">
        <ul class="breadcrumb fs-7 my-0">
            <li class="breadcrumb-item"><a href="{{ route('holiday.packages') }}">Holiday Management</a></li>
            <li class="breadcrumb-item">Add Package</li>
        </ul>
    </div>

    <div class="card-body pt-4">
        <form action="{{ route('holiday.packages.store') }}" method="POST" enctype="multipart/form-data" novalidate>
            @csrf

            {{-- BASIC INFORMATION --}}
            <div class="section-panel mb-4">
                <div class="section-panel__header"><i class="fa fa-info-circle"></i> Basic Information</div>
                <div class="section-panel__body">

                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Name *</label>
                        <div class="col-md-9">
                            <input type="text" name="name"
                                class="form-control @error('name') is-invalid @enderror"
                                value="{{ old('name') }}" required>
                            @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Description</label>
                        <div class="col-md-9">
                            <textarea name="description" id="description">{{ old('description') }}</textarea>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Short Description</label>
                        <div class="col-md-9">
                            <textarea name="short_description" class="form-control">{{ old('short_description') }}</textarea>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Location</label>
                        <div class="col-md-9">
                            <textarea name="location" class="form-control">{{ old('location') }}</textarea>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Select Destination</label>
                        <div class="col-md-9">
                            <select name="destination_id" class="form-control @error('destination_id') is-invalid @enderror">
                                @foreach($destinations as $destination)
                                    <option value="{{ $destination->id }}"
                                        {{ old('destination_id') == $destination->id ? 'selected' : '' }}>
                                        {{ $destination->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('destination_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                </div>
            </div>

            {{-- TOUR DATES --}}
            <div class="section-panel mb-4">
                <div class="section-panel__header"><i class="fa fa-calendar-alt"></i> Tour Dates</div>
                <div class="section-panel__body">

                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Tour Start Date *</label>
                        <div class="col-md-4">
                            <input type="date" name="tour_start_date"
                                class="form-control @error('tour_start_date') is-invalid @enderror"
                                value="{{ old('tour_start_date') }}">
                            @error('tour_start_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Tour End Date *</label>
                        <div class="col-md-4">
                            <input type="date" name="tour_end_date"
                                class="form-control @error('tour_end_date') is-invalid @enderror"
                                value="{{ old('tour_end_date') }}">
                            @error('tour_end_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="row mb-0">
                        <label class="col-md-3 col-form-label">Last Booking Date *</label>
                        <div class="col-md-4">
                            <input type="date" name="last_booking_date"
                                class="form-control @error('last_booking_date') is-invalid @enderror"
                                value="{{ old('last_booking_date') }}">
                            @error('last_booking_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                </div>
            </div>

            {{-- MAP & ITINERARY --}}
            <div class="section-panel mb-4">
                <div class="section-panel__header"><i class="fa fa-map-marked-alt"></i> Map &amp; Itinerary</div>
                <div class="section-panel__body">

                    <div class="row mb-4">
                        <label class="col-md-3 col-form-label">Map</label>
                        <div class="col-md-9">
                            <textarea name="map" class="form-control">{{ old('map') }}</textarea>
                        </div>
                    </div>

                    <div class="row mb-0">
                        <label class="col-md-3 col-form-label">Itinerary</label>
                        <div class="col-md-9">
                            <div class="table-responsive">
                                <table class="table table-bordered mb-2" id="itineraryTable">
                                    <thead>
                                        <tr>
                                            <th width="10%">Day No</th>
                                            <th width="20%">Title</th>
                                            <th width="35%">Description</th>
                                            <th width="25%">Image</th>
                                            <th width="10%"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><input type="number" name="itinerary_day_no[]" class="form-control" min="1" value="1"></td>
                                            <td><input type="text" name="itinerary_title[]" class="form-control" placeholder="e.g. Arrival & City Tour"></td>
                                            <td><textarea name="itinerary_description[]" class="form-control" rows="2"></textarea></td>
                                            <td><input type="file" name="itinerary_image[]" class="form-control"></td>
                                            <td><button type="button" class="btn btn-danger btn-sm removeItinerary">X</button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <button type="button" class="btn btn-light-primary btn-sm" id="addItinerary">
                                <i class="fa fa-plus me-1"></i> Add Itinerary Day
                            </button>
                        </div>
                    </div>

                </div>
            </div>

            {{-- PRICING --}}
            <div class="section-panel mb-4">
                <div class="section-panel__header"><i class="fa fa-dollar-sign"></i> Pricing</div>
                <div class="section-panel__body">

                    <div class="row mb-0">
                        <label class="col-md-3 col-form-label">Price Type *</label>
                        <div class="col-md-9">

                            <div class="d-flex gap-3 mb-3">
                                <div class="price-type-option {{ old('price_type', 'fixed') == 'fixed' ? 'active' : '' }}"
                                    onclick="setPriceType('fixed')" id="opt-fixed">
                                    <i class="fa fa-tag"></i> Fixed Price
                                </div>
                                <div class="price-type-option {{ old('price_type') == 'range' ? 'active' : '' }}"
                                    onclick="setPriceType('range')" id="opt-range">
                                    <i class="fa fa-arrows-left-right"></i> Price Range
                                </div>
                            </div>

                            <input type="hidden" name="price_type" id="price_type_input" value="{{ old('price_type', 'fixed') }}">

                            <div id="fixedPriceBlock">
                                <div class="input-group" style="max-width:420px;">
                                    <span class="input-group-text fw-bold">$</span>
                                    <input type="number" name="price_min" step="0.01" min="0" id="fixed_price_input"
                                        class="form-control @error('price_min') is-invalid @enderror"
                                        value="{{ old('price_min') }}" placeholder="e.g. 0 or 499.99">
                                    <span class="input-group-text text-muted">USD</span>
                                </div>
                                @error('price_min') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                            </div>

                            <div id="rangePriceBlock" style="display:none; max-width:420px;">
                                <div class="input-group">
                                    <span class="input-group-text fw-bold">$</span>
                                    <input type="number" name="price_min_range" step="0.01" min="0" id="range_min_input"
                                        class="form-control @error('price_min_range') is-invalid @enderror"
                                        value="{{ old('price_min_range') }}" placeholder="Min">
                                    <span class="input-group-text">–</span>
                                    <input type="number" name="price_max_range" step="0.01" min="0" id="range_max_input"
                                        class="form-control @error('price_max_range') is-invalid @enderror"
                                        value="{{ old('price_max_range') }}" placeholder="Max">
                                    <span class="input-group-text text-muted">USD</span>
                                </div>
                                @error('price_min_range') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                                @error('price_max_range') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                            </div>

                        </div>
                    </div>

                </div>
            </div>

            {{-- POLICIES & SETTINGS --}}
            <div class="section-panel mb-4">
                <div class="section-panel__header"><i class="fa fa-file-contract"></i> Policies &amp; Settings</div>
                <div class="section-panel__body">

                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Policy</label>
                        <div class="col-md-9">
                            <textarea name="policy" id="policy">{{ old('policy') }}</textarea>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Terms and Conditions</label>
                        <div class="col-md-9">
                            <textarea name="terms_conditions" id="terms_conditions">{{ old('terms_conditions') }}</textarea>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Is Featured?</label>
                        <div class="col-md-3">
                            <select name="is_featured" class="form-control">
                                <option value="0" {{ old('is_featured') == '0' ? 'selected' : '' }}>No</option>
                                <option value="1" {{ old('is_featured') == '1' ? 'selected' : '' }}>Yes</option>
                            </select>
                        </div>
                    </div>

                    <div class="row mb-0 align-items-center">
                        <label class="col-md-3 col-form-label">Payment Mode *</label>
                        <div class="col-md-9">
                            <div class="d-flex align-items-center gap-4">
                                <div class="form-check form-check-inline">
                                    <input type="radio" name="payment_type" value="online" id="payment_online"
                                        class="form-check-input payment-radio"
                                        {{ old('payment_type') == 'online' ? 'checked' : '' }}>
                                    <label class="form-check-label payment-label" for="payment_online">Online Payment</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input type="radio" name="payment_type" value="offline" id="payment_offline"
                                        class="form-check-input payment-radio"
                                        {{ old('payment_type', 'offline') == 'offline' ? 'checked' : '' }}>
                                    <label class="form-check-label payment-label" for="payment_offline">Offline Payment</label>
                                </div>
                            </div>
                            @error('payment_type') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>
                    </div>

                </div>
            </div>

            {{-- MEDIA --}}
            <div class="section-panel mb-4">
                <div class="section-panel__header"><i class="fa fa-images"></i> Media</div>
                <div class="section-panel__body">

                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Photo *</label>
                        <div class="col-md-6">
                            <input type="file" name="photo" class="form-control @error('photo') is-invalid @enderror">
                            @error('photo') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            <small class="text-muted">Only jpg, jpeg, gif and png are allowed</small>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Banner *</label>
                        <div class="col-md-6">
                            <input type="file" name="banner" class="form-control @error('banner') is-invalid @enderror">
                            @error('banner') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            <small class="text-muted">Only jpg, jpeg, gif and png are allowed</small>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Tour Photos</label>
                        <div class="col-md-9">
                            <table class="table table-bordered mb-2" id="photoTable">
                                <tr>
                                    <td width="90%"><input type="file" name="tour_photos[]" class="form-control"></td>
                                    <td width="10%"><button type="button" class="btn btn-danger btn-sm removePhoto">X</button></td>
                                </tr>
                            </table>
                            <button type="button" class="btn btn-light-primary btn-sm" id="addPhoto">
                                <i class="fa fa-plus me-1"></i> Add Photo
                            </button>
                        </div>
                    </div>

                    <div class="row mb-0">
                        <label class="col-md-3 col-form-label">Tour Videos</label>
                        <div class="col-md-9">
                            <table class="table table-bordered mb-2" id="videoTable">
                                <tr>
                                    <td width="90%"><textarea name="tour_videos[]" class="form-control" placeholder="Video iFrame Code"></textarea></td>
                                    <td width="10%"><button type="button" class="btn btn-danger btn-sm removeVideo">X</button></td>
                                </tr>
                            </table>
                            <button type="button" class="btn btn-light-primary btn-sm" id="addVideo">
                                <i class="fa fa-plus me-1"></i> Add Video
                            </button>
                        </div>
                    </div>

                </div>
            </div>

            {{-- SEO INFORMATION --}}
            <div class="section-panel mb-4">
                <div class="section-panel__header"><i class="fa fa-search"></i> SEO Information</div>
                <div class="section-panel__body">

                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Meta Title *</label>
                        <div class="col-md-9">
                            <input type="text" name="meta_title" class="form-control @error('meta_title') is-invalid @enderror"
                                value="{{ old('meta_title') }}">
                            @error('meta_title') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Meta Keywords *</label>
                        <div class="col-md-9">
                            <textarea name="meta_keywords" class="form-control @error('meta_keywords') is-invalid @enderror">{{ old('meta_keywords') }}</textarea>
                            @error('meta_keywords') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="row mb-0">
                        <label class="col-md-3 col-form-label">Meta Description *</label>
                        <div class="col-md-9">
                            <textarea name="meta_description" class="form-control @error('meta_description') is-invalid @enderror">{{ old('meta_description') }}</textarea>
                            @error('meta_description') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                </div>
            </div>

            {{-- ACTIONS --}}
            <div class="d-flex justify-content-end gap-2">
                <a href="{{ route('holiday.packages') }}" class="btn btn-outline-secondary px-4">Cancel</a>
                <button type="submit" class="btn btn-primary px-4">
                    <i class="fa fa-check me-1"></i> Submit
                </button>
            </div>

        </form>
    </div>
</div>

<style>
    /* ---- Toast ---- */
    #successToast {
        position: fixed; bottom: 30px; left: 30px;
        background-color: #155724; color: #fff;
        padding: 12px 20px; border-radius: 6px;
        font-size: 14px; font-weight: 500;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        z-index: 9999; display: flex; align-items: center; gap: 8px;
        animation: fadeInUp 0.3s ease;
    }
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* ---- Card header ---- */
    .card-header h3 {
        font-size: 16px; font-weight: 600; margin: 0;
        display: flex; align-items: center; gap: 8px;
    }

    /* ---- Section panel ---- */
    .section-panel {
        border: 1px solid #e9ecef;
        border-radius: 10px;
        overflow: hidden;
    }
    .section-panel__header {
        display: flex; align-items: center; gap: 8px;
        background: #f8f9fc;
        border-bottom: 1px solid #e9ecef;
        padding: 12px 18px;
        font-size: 13px; font-weight: 600; color: #333;
    }
    .section-panel__header .fa { color: var(--bs-primary); font-size: 14px; }
    .section-panel__body { padding: 20px 18px; }

    .btn-light-primary {
        background: #eef6ff;
        color: #0d6efd;
        border: 1px solid #dbeafe;
    }
    .btn-light-primary:hover {
        background: #0d6efd;
        color: #fff;
    }

    .payment-radio { width:18px; height:18px; cursor:pointer; border:2px solid #000 !important; accent-color:#000; }
    .payment-radio:checked { background-color:#000 !important; border-color:#000 !important; accent-color:#000; }
    .payment-label { cursor:pointer; user-select:none; }
    .price-type-option {
        flex: 1; padding: 12px 16px; border: 2px solid #dee2e6; border-radius: 10px;
        cursor: pointer; font-weight: 600; font-size: 14px; color: #555;
        display: flex; align-items: center; justify-content: center; gap: 8px;
        transition: all 0.2s; max-width: 200px;
    }
    .price-type-option:hover { border-color: #1976D2; }
    .price-type-option.active { border-color: #1976D2; background: #e3f2fd; color: #1565C0; }
</style>

@endsection

@section('scripts')
<script src="https://cdn.ckeditor.com/4.22.1/full/ckeditor.js"></script>
<script>
    CKEDITOR.config.versionCheck = false;
    CKEDITOR.replace('description');
    CKEDITOR.replace('policy');
    CKEDITOR.replace('terms_conditions');

    $(document).ready(function () {
        $('#addPhoto').click(function () {
            $('#photoTable').append(`<tr><td><input type="file" name="tour_photos[]" class="form-control"></td><td><button type="button" class="btn btn-danger btn-sm removePhoto">X</button></td></tr>`);
        });
        $(document).on('click', '.removePhoto', function () { $(this).closest('tr').remove(); });

        $('#addVideo').click(function () {
            $('#videoTable').append(`<tr><td><textarea name="tour_videos[]" class="form-control" placeholder="Video iFrame Code"></textarea></td><td><button type="button" class="btn btn-danger btn-sm removeVideo">X</button></td></tr>`);
        });
        $(document).on('click', '.removeVideo', function () { $(this).closest('tr').remove(); });
    });

    function setPriceType(type) {
        document.getElementById('price_type_input').value = type;
        document.getElementById('opt-fixed').classList.toggle('active', type === 'fixed');
        document.getElementById('opt-range').classList.toggle('active', type === 'range');
        document.getElementById('fixedPriceBlock').style.display = type === 'fixed' ? '' : 'none';
        document.getElementById('rangePriceBlock').style.display = type === 'range' ? '' : 'none';
        document.getElementById('fixed_price_input').disabled = (type !== 'fixed');
        document.getElementById('range_min_input').disabled   = (type !== 'range');
        document.getElementById('range_max_input').disabled   = (type !== 'range');
    }
    document.addEventListener('DOMContentLoaded', function () {
        setPriceType(document.getElementById('price_type_input').value || 'fixed');
    });

    let dayCount = $('#itineraryTable tbody tr').length;

    $('#addItinerary').click(function () {
        dayCount++;
        $('#itineraryTable tbody').append(`
            <tr>
                <td><input type="number" name="itinerary_day_no[]" class="form-control" min="1" value="${dayCount}"></td>
                <td><input type="text" name="itinerary_title[]" class="form-control" placeholder="e.g. Arrival & City Tour"></td>
                <td><textarea name="itinerary_description[]" class="form-control" rows="2"></textarea></td>
                <td><input type="file" name="itinerary_image[]" class="form-control"></td>
                <td><button type="button" class="btn btn-danger btn-sm removeItinerary">X</button></td>
            </tr>
        `);
    });

    $(document).on('click', '.removeItinerary', function () {
        $(this).closest('tr').remove();
    });

    // Toast dismiss
    var t = document.getElementById('successToast');
    if (t) {
        setTimeout(function () {
            t.style.transition = 'opacity 0.5s ease';
            t.style.opacity = '0';
            setTimeout(function () { t.remove(); }, 500);
        }, 3000);
    }
</script>
@endsection