@extends('layouts.app')

@section('content')

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="fa fa-check-circle"></i> {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif



    <div class="card">

        <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('packages') }}" class="btn btn-primary">
                View All
            </a>

        </div>


        <div class="card-body">

             <form action="{{ route('packages.store') }}" method="POST" enctype="multipart/form-data" novalidate>
                @csrf

                <div class="container-fluid">


                    {{-- NAME --}}

                    <div class="row mb-3">

                        <label class="col-md-3 col-form-label">Name *</label>

                        <div class="col-md-7">
                            <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>



                    {{-- DESCRIPTION --}}

                    <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>



                    {{-- SHORT DESCRIPTION --}}

                    <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>



                    {{-- LOCATION --}}

                    <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>



                    {{-- TOUR DATES --}}

                    <div class="row mb-3">

                        <label class="col-md-3 col-form-label">Tour Start Date *</label>

                        <div class="col-md-3">
                            <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-3">
                            <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-3">

                        <label class="col-md-3 col-form-label">Last Booking Date *</label>

                        <div class="col-md-3">
                            <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>



                    {{-- MAP --}}

                    <div class="row mb-3">

                        <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>



                    {{-- ITINERARY --}}

                    <div class="row mb-3">

                        <label class="col-md-3 col-form-label">Itinerary</label>

                        <div class="col-md-9">
                            <textarea name="itinerary" id="itinerary">{{ old('itinerary') }}</textarea>
                        </div>

                    </div>



                    {{-- PRICE --}}

                    <div class="row mb-3">

                        <label class="col-md-3 col-form-label">Price (per person) *</label>

                        <div class="col-md-4">
                            <div class="input-group">
                                <span class="input-group-text fw-bold">$</span>
                                <input type="number" name="price" step="0.01" min="0"
                                    class="form-control @error('price') is-invalid @enderror"
                                    value="{{ old('price') }}"
                                    placeholder="0.00">
                                <span class="input-group-text text-muted">USD</span>
                            </div>
                            @error('price')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                    </div>



                    {{-- POLICY --}}

                    <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>



                    {{-- TERMS --}}

                    <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>



                    {{-- FEATURED --}}

                    <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>


                    {{-- PAYMENT MODE --}}
                    {{-- ✅ FIXED: added @error display for payment_type --}}
                    <div class="row mb-3 align-items-center">
                        <label class="col-md-3 col-form-label">Payment Mode *</label>

                        <div class="col-md-6">
                            <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>

                    {{-- PHOTO --}}

                    <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>Only jpg, jpeg, gif and png are allowed</small>

                        </div>

                    </div>



                    {{-- BANNER --}}

                    <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>Only jpg, jpeg, gif and png are allowed</small>

                        </div>

                    </div>



                    {{-- DESTINATION --}}

                    <div class="row mb-3">

                        <label class="col-md-3 col-form-label">Select Destination</label>

                        <div class="col-md-6">

                            <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>



                    {{-- TOUR PHOTOS --}}

                    <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" 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 removePhoto">X</button>
                                    </td>

                                </tr>

                            </table>

                            <button type="button" class="btn btn-info btn-sm" id="addPhoto">
                                + Add Photo
                            </button>

                        </div>

                    </div>


                    {{-- TOUR VIDEOS --}}

                    <div class="row mb-3">

                        <label class="col-md-3 col-form-label">Tour Videos</label>

                        <div class="col-md-9">

                            <table class="table table-bordered" 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 removeVideo">X</button>
                                    </td>

                                </tr>

                            </table>

                            <button type="button" class="btn btn-info btn-sm" id="addVideo">
                                + Add Video
                            </button>

                        </div>

                    </div>



                    <hr>

                    <h5 class="mb-3">SEO Information</h5>



                    {{-- META TITLE --}}
                    <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>

                    {{-- META KEYWORDS --}}
                    <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>

                    {{-- META DESCRIPTION --}}
                    <div class="row mb-3">
                        <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 class="row">

                        <div class="col-md-3"></div>

                        <div class="col-md-6">

                            <button type="submit" class="btn btn-primary">
                                Submit
                            </button>

                        </div>

                    </div>


                </div>

            </form>

        </div>

    </div>

@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('itinerary');
        CKEDITOR.replace('policy');
        CKEDITOR.replace('terms_conditions');


        $(document).ready(function () {

            /* ADD PHOTO */

            $('#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 removePhoto">X</button>
    </td>
    </tr>
    `);

            });


            /* REMOVE PHOTO */

            $(document).on('click', '.removePhoto', function () {

                $(this).closest('tr').remove();

            });


            /* ADD VIDEO */

            $('#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 removeVideo">X</button>
    </td>
    </tr>
    `);

            });


            /* REMOVE VIDEO */

            $(document).on('click', '.removeVideo', function () {

                $(this).closest('tr').remove();

            });

        });

    </script>

    <style>
    .payment-radio {
        width: 18px;
        height: 18px;
        cursor: pointer;
        border: 2px solid #000 !important;
        accent-color: #000;
    }

    .payment-radio:hover {
        border-color: #000 !important;
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
        cursor: pointer;
    }

    .payment-radio:checked {
        background-color: #000 !important;
        border-color: #000 !important;
        accent-color: #000;
    }

    .payment-radio:focus {
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
        outline: none;
    }

    .payment-label {
        cursor: pointer;
        user-select: none;
    }
</style>

@endsection