@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <h5 class="mb-0" style="font-weight:600;">
        <i class="fas fa-map-marker-alt me-2" style="color:var(--admin-primary)"></i>
        {{ isset($destinations) ? 'Edit Destination' : 'Create Destination' }}
    </h5>
    <a href="{{ route('destinations.index') }}" class="btn-admin-outline"><i class="fas fa-arrow-left me-1"></i>
        Back</a>
</div>

<div class="admin-card">
    <div class="admin-card-body">
        @include('partials.errors')

        <form
            action="{{ isset($destinations) ? route('destinations.update', $destinations->id) : route('destinations.store') }}"
            method="POST" enctype="multipart/form-data" class="admin-form">
            @csrf
            @if (isset($destinations))
            @method('PUT')
            @endif

            <div class="mb-3">
                <label for="title" class="form-label">Title</label>
                <input type="text" class="form-control" name="title" id="title"
                    value="{{ isset($destinations) ? $destinations->title : '' }}" placeholder="Destination name">
            </div>

            <div class="mb-3">
                <label for="description" class="form-label">Description</label>
                <textarea name="description" class="form-control" id="description" cols="5" rows="4"
                    placeholder="Short description">{{ isset($destinations) ? $destinations->description : '' }}</textarea>
            </div>

            <div class="mb-3" style="display:none;">
                <label for="content" class="form-label">Content</label>
                <input id="content" type="hidden" name="content"
                    value="{{ isset($destination) ? $destination->content : '' }}">
                <trix-editor class="itinerary-editor" input="content"></trix-editor>
            </div>

            <div class="row g-3 mb-3">
                <div class="col-md-4">
                    <label for="pricing" class="form-label">Pricing</label>
                    <input type="text" class="form-control" name="pricing" id="pricing"
                        value="{{ isset($destinations) ? $destinations->pricing : '' }}">
                </div>
                <div class="col-md-4">
                    <label for="sale_price" class="form-label">Sale Price</label>
                    <input type="text" class="form-control" name="sale_price" id="sale_price"
                        value="{{ isset($destinations) ? $destinations->sale_price : '' }}">
                </div>
               <div class="col-md-4">
                <label for="category" class="form-label">Category</label>
                <select name="category[]" id="category" class="form-select" multiple>
                    @foreach ($categories as $category)
                        <option value="{{ $category->id }}"
                            @if(isset($destinations) && $destinations->categories->pluck('id')->contains($category->id)) selected @endif>
                            {{ $category->name }}
                        </option>
                    @endforeach
                </select>
            </div>


            </div>



            <div class="row g-3 mb-3">
                <div class="col-md-4">
                    <label for="duration" class="form-label">Duration</label>
                    <select name="duration" id="duration" class="form-select">
                        <option value="">Select Duration</option>
                        @foreach ($durations as $duration)
                        <option value="{{ $duration->id }}" @if (isset($destinations) && $duration->id ==
                            $destinations->duration) selected @endif
                            >{{ $duration->name }}</option>
                        @endforeach
                    </select>
                    
                </div>
                <div class="col-md-4">
                    <label for="location" class="form-label">Location</label>
                    <input type="text" class="form-control" name="location" id="location"
                        value="{{ isset($destinations) ? $destinations->location : '' }}"
                        placeholder="e.g. Manali, Himachal Pradesh">
                </div>

                <div class="col-md-4">
                     <label class="form-label">Status</label>
                    <select name="status" class="form-select">
                        <option value="1"
                            {{ (isset($destination) && $destination->status == 1) ? 'selected' : '' }}>
                            Active
                        </option>

                        <option value="0"
                            {{ (isset($destination) && $destination->status == 0) ? 'selected' : '' }}>
                            Inactive
                        </option>
                    </select>
                </div>
            </div>

            <div class="row g-3 mb-3">


                <div class="col-md-4" style="display:none;">
                    <label for="published_at" class="form-label">Published At</label>
                    <input type="text" class="form-control" name="published_at" id="published_at"
                        value="{{ isset($destinations) ? $destinations->published_at : '' }}"
                        placeholder="Select date & time">
                </div>
                 <div class="col-md-4">
                    <label for="image_alt" class="form-label">Image Alt Text</label>
                    <input type="text" class="form-control" name="image_alt" id="image_alt"
                        value="{{ isset($destinations) ? $destinations->image_alt : '' }}"
                        placeholder="Enter image alt text">
                </div>
               <div class="col-md-4">
                <div class="mb-3 d-flex align-items-center gap-3">
                    @if (isset($destinations))
                        <img src="{{ asset('/storage/' . $destinations->image) }}" 
                            alt="{{ $destinations->title }}" 
                            style="height:50px; width:50px;" 
                            class="img-preview">
                    @endif

                    <div class="flex-grow-1">
                        <label for="image" class="form-label">
                            {{ isset($destinations) ? 'Replace Image' : 'Image' }}
                        </label>
                        <input type="file" class="form-control" name="image" id="image" accept="image/*">
                    </div>
                </div>
            </div>

               <div class="col-md-4">
    <div class="mb-3 d-flex align-items-center gap-3">
        @if (isset($destinations))
            <img src="{{ asset('/storage/' . $destinations->banner_image) }}" 
                 alt="{{ $destinations->title }}" 
                 style="height:50px; width:50px;" 
                 class="img-preview">
        @endif

        <div class="flex-grow-1">
            <label for="banner_image" class="form-label">
                {{ isset($destinations) ? 'Replace Banner Image' : 'Banner Image' }}
            </label>
            <input type="file" class="form-control" name="banner_image" id="banner_image" accept="image/*">
        </div>
    </div>
</div>

            </div>
              <div class="row g-3 mb-3">
              <div class="col-md-4 mb-3">
                    <label class="form-label">Package Type <span class="text-danger">*</span></label>

                    <select name="package_type" class="form-control">
                        <option value="">Select Package Type</option>

                        <option value="India Tour"
                            {{ old('package_type', $destinations->package_type ?? '') == 'India Tour' ? 'selected' : '' }}>
                            India Tour
                        </option>

                        <option value="International Tour"
                            {{ old('package_type', $destinations->package_type ?? '') == 'International Tour' ? 'selected' : '' }}>
                            International Tour
                        </option>

                        <option value="Theme Based"
                            {{ old('package_type', $destinations->package_type ?? '') == 'Theme Based' ? 'selected' : '' }}>
                            Theme Based
                        </option>

                    </select>
                </div>

                 
                <div class="col-md-4 mb-3">
                    <label class="form-label">Is Top <span class="text-danger">*</span></label>

                    <select name="is_top" class="form-control">
                        <option value="">Select</option>
                        <option value="0"
                            {{ old('is_top', $category->is_top ?? '') == '0' ? 'selected' : '' }}>
                            No
                        </option>
                        <option value="1"
                            {{ old('is_top', $category->is_top ?? '') == '1' ? 'selected' : '' }}>
                            Yes
                        </option>
                    </select>
                </div>

                 
                <div class="col-md-4 mb-3">
                    <label class="form-label">Is Home <span class="text-danger">*</span></label>

                    <select name="is_home" class="form-control">
                        <option value="">Select</option>
                        <option value="0"
                            {{ old('is_home', $category->is_home ?? '') == '0' ? 'selected' : '' }}>
                            No
                        </option>
                        <option value="1"
                            {{ old('is_home', $category->is_home ?? '') == '1' ? 'selected' : '' }}>
                            Yes
                        </option>
                    </select>
                </div>
            </div> 

            <hr>
            <!-- SEO Section -->
            <h5 class="mb-3">
                <i class="fas fa-search me-2" style="color:var(--admin-primary)"></i>
                SEO Settings    
            </h5>
            <div class="mb-3">
                <label for="meta_title" class="form-label">Meta Title</label>
                <input type="text" class="form-control" name="meta_title" id="meta_title"
                    value="{{ isset($destinations) ? $destinations->meta_title : '' }}">    
              </div>
            <div class="mb-3">
                <label for="meta_description" class="form-label">Meta Description</label>
                <textarea name="meta_description" class="form-control" id="meta_description" cols="5" rows="4"
                    placeholder="Meta description">{{ isset($destinations) ? $destinations->meta_description : '' }}</textarea>
            </div>
            <div class="mb-3">
                <label for="meta_keywords" class="form-label">Meta Keywords</label>
                <input type="text" class="form-control" name="meta_keywords" id="meta_keywords"
                    value="{{ isset($destinations) ? $destinations->meta_keywords : '' }}">    
            </div>

            
            <hr>

            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5>
                    <i class="fas fa-star text-warning"></i>
                    Package Amenities
                </h5>
            </div>

        <div id="amenitiesWrapper">
            <div class="row">
                @if(isset($amenities) && count($amenities) > 0)
                    @php
                        // Already selected amenities (from destination record)
                        $selectedAmenities = $destinations->features_json ?? [];
                    @endphp

                    @foreach($amenities as $amenity)
                        <div class="col-md-2 mb-2">
                            <div class="form-check">
                                <input type="checkbox"
                                    class="form-check-input"
                                    id="amenity_{{ $amenity->id }}"
                                    name="amenities[]"
                                    value="{{ $amenity->id }}"
                                    {{ in_array($amenity->id, $selectedAmenities) ? 'checked' : '' }}>
                                <label class="form-check-label" for="amenity_{{ $amenity->id }}">
                                    <i class="{{ $amenity->icon }}"></i> {{ $amenity->title }}
                                </label>
                            </div>
                        </div>
                    @endforeach
                @else
                    <p class="text-muted">No amenities found.</p>
                @endif
            </div>
        </div>


            <hr>

            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0">
                    <i class="fas fa-route text-primary"></i>
                    Days Wise Itinerary
                </h5>

                <button type="button" class="btn btn-sm btn-primary" id="addDay">
                    <i class="fas fa-plus"></i> Add Day
                </button>
            </div>

            <div id="itineraryWrapper">

               @if(isset($destinations) && !empty($destinations->itinerary_json) && count($destinations->itinerary_json))

                    @foreach($destinations->itinerary_json as $i => $day)

                    <div class="card mb-3 itinerary-item">

                        <div class="card-header d-flex justify-content-between align-items-center">

                            <strong>
                                Day <span class="day-number">{{ $i + 1 }}</span>
                            </strong>

                            <button type="button" class="btn btn-danger btn-sm removeDay">
                                <i class="fas fa-trash"></i>
                            </button>

                        </div>

                        <div class="card-body">

                            <div class="row">

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

                                    <label>Day</label>

                                    <input type="number"
                                        class="form-control"
                                        name="itinerary_day[]"
                                        value="{{ $day['day'] ?? '' }}">

                                </div>

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

                                    <label>Title</label>

                                    <input type="text"
                                        class="form-control"
                                        name="itinerary_title[]"
                                        value="{{ $day['title'] ?? '' }}"
                                        placeholder="Arrival at Manali">

                                </div>

                            </div>

                         <div class="mt-3">

                            <label>Description</label>

                            <input
                                id="itinerary_description_{{ $i }}"
                                type="hidden"
                                name="itinerary_description[]"
                                value="{{ $day['description'] ?? '' }}">

                            <trix-editor class="itinerary-editor"  input="itinerary_description_{{ $i }}"></trix-editor>

                        </div>

                        </div>

                    </div>

                    @endforeach

                @else

                <div class="card mb-3 itinerary-item">

                    <div class="card-header d-flex justify-content-between align-items-center">

                        <strong>Day <span class="day-number">1</span></strong>

                        <button type="button" class="btn btn-danger btn-sm removeDay">
                            <i class="fas fa-trash"></i>
                        </button>

                    </div>

                    <div class="card-body">

                        <div class="row">

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

                                <label>Day</label>

                                <input type="number" class="form-control" name="itinerary_day[]" value="1">

                            </div>

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

                                <label>Title</label>

                                <input type="text" class="form-control" name="itinerary_title[]" placeholder="Arrival">

                            </div>

                        </div>

                        <div class="mt-3">

                            <label>Description</label>

                            <input type="hidden" id="itinerary_description_1" name="itinerary_description[]">

                            <trix-editor class="itinerary-editor" input="itinerary_description_1"></trix-editor>

                        </div>

                    </div>

                </div>

                @endif

            </div>

            <hr>

            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5>
                    <i class="fas fa-check-circle text-success"></i>
                    Inclusions
                </h5>

                <button type="button" class="btn btn-success btn-sm" id="addInclusion">
                    <i class="fas fa-plus"></i>
                    Add Inclusion
                </button>
            </div>

            <div id="inclusionWrapper">

                @if(isset($destinations) && !empty($destinations->inclusions_json) && count($destinations->inclusions_json))

                    @foreach($destinations->inclusions_json as $inclusion)

                        <div class="row inclusion-item mb-2">

                            <div class="col-md-11">
                                <input type="text"
                                    class="form-control"
                                    name="inclusion[]"
                                    value="{{ $inclusion }}"
                                    placeholder="Pickup & Drop from Airport">
                            </div>

                            <div class="col-md-1">
                                <button class="btn btn-danger removeInclusion" type="button">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>

                        </div>

                    @endforeach

                @else

                    <div class="row inclusion-item mb-2">

                        <div class="col-md-11">
                            <input type="text"
                                class="form-control"
                                name="inclusion[]"
                                placeholder="Pickup & Drop from Airport">
                        </div>

                        <div class="col-md-1">
                            <button class="btn btn-danger removeInclusion" type="button">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>

                    </div>

                @endif

            </div>
            <hr>

            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5>
                    <i class="fas fa-times-circle text-danger"></i>
                    Exclusions
                </h5>

                <button type="button" class="btn btn-danger btn-sm" id="addExclusion">
                    <i class="fas fa-plus"></i>
                    Add Exclusion
                </button>
            </div>

            <div id="exclusionWrapper">

                @if(isset($destinations) && !empty($destinations->exclusions_json) && count($destinations->exclusions_json))

                    @foreach($destinations->exclusions_json as $exclusion)

                        <div class="row exclusion-item mb-2">

                            <div class="col-md-11">
                                <input type="text"
                                    class="form-control"
                                    name="exclusion[]"
                                    value="{{ $exclusion }}"
                                    placeholder="Air / Train Fare">
                            </div>

                            <div class="col-md-1">
                                <button class="btn btn-danger removeExclusion" type="button">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>

                        </div>

                    @endforeach

                @else

                    <div class="row exclusion-item mb-2">

                        <div class="col-md-11">
                            <input type="text"
                                class="form-control"
                                name="exclusion[]"
                                placeholder="Air / Train Fare">
                        </div>

                        <div class="col-md-1">
                            <button class="btn btn-danger removeExclusion" type="button">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>

                    </div>

                @endif

            </div>

            <hr>

            <div class="d-flex justify-content-between align-items-center mb-3">

                <h4>Package Cost</h4>

                <button type="button" class="btn btn-primary" id="addValidity">

                    <i class="fas fa-plus"></i>

                    Add Validity

                </button>

            </div>

            <div id="validityWrapper">

                @if(isset($destinations) && !empty($destinations->package_cost_json))

                    @foreach($destinations->package_cost_json as $vIndex => $validity)

                    <div class="card mb-4 validity-card">

                        <div class="card-header d-flex justify-content-between">

                            <h5>Validity {{ $vIndex+1 }}</h5>

                            <button type="button" class="btn btn-danger removeValidity">
                                Remove
                            </button>

                        </div>

                        <div class="card-body">

                            <div class="row">

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

                                    <label>Title</label>

                                    <input class="form-control"
                                        name="validity[{{ $vIndex }}][title]"
                                        value="{{ $validity['title'] ?? '' }}">

                                </div>

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

                                    <label>Valid From</label>

                                    <input type="date"
                                        class="form-control"
                                        name="validity[{{ $vIndex }}][from]"
                                        value="{{ $validity['from'] ?? '' }}">

                                </div>

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

                                    <label>Valid To</label>

                                    <input type="date"
                                        class="form-control"
                                        name="validity[{{ $vIndex }}][to]"
                                        value="{{ $validity['to'] ?? '' }}">

                                </div>

                            </div>

                            <hr>

                            <button type="button"
                                    class="btn btn-success addPackageRow"
                                    data-index="{{ $vIndex }}">

                                Add Package Row

                            </button>

                            <table class="table table-bordered mt-3">

                                <thead>

                                    <tr>

                                        <th>Rooms</th>
                                        <th>Vehicle</th>
                                        <th>Cost</th>
                                        <th>Min Person</th>
                                        <th>Meal</th>
                                       
                                        <th></th>

                                    </tr>

                                </thead>

                                <tbody id="rows_{{ $vIndex }}">

                                @foreach($validity['rows'] as $row)

                                    <tr>

                                        <td>
                                            <input class="form-control"
                                                name="validity[{{ $vIndex }}][rows][room_no][]"
                                                value="{{ $row['room_no'] }}">
                                        </td>

                                        <td>
                                            <input class="form-control"
                                                name="validity[{{ $vIndex }}][rows][vehicle][]"
                                                value="{{ $row['vehicle'] }}">
                                        </td>

                                        <td>
                                            <input class="form-control"
                                                name="validity[{{ $vIndex }}][rows][cost][]"
                                                value="{{ $row['cost'] }}">
                                        </td>

                                        <td>
                                            <input class="form-control"
                                                name="validity[{{ $vIndex }}][rows][person][]"
                                                value="{{ $row['person'] }}">
                                        </td>

                                        <td>
                                            <input class="form-control"
                                                name="validity[{{ $vIndex }}][rows][meal][]"
                                                value="{{ $row['meal'] }}">
                                        </td>

                                      

                                        <td>

                                            <button type="button"
                                                    class="btn btn-danger removeRow">

                                                X

                                            </button>

                                        </td>

                                    </tr>

                                @endforeach

                                </tbody>

                            </table>

                        </div>

                    </div>

                    @endforeach


                @endif

                </div>

            <hr/>
            <button type="submit" class="btn-admin-primary">
                <i class="fas fa-save me-1"></i>
                {{ isset($destinations) ? 'Update Destination' : 'Create Destination' }}
            </button>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.2.3/trix.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<script>
flatpickr('#published_at', {
    enableTime: true
});
document.addEventListener('DOMContentLoaded', function() {
    if (typeof $ !== 'undefined') {
      $('#category').select2({
            placeholder: "Select categories",
            allowClear: true,
            width: '100%'
        });
    }
});

document.addEventListener("DOMContentLoaded", function() {



    let wrapper = document.getElementById("itineraryWrapper");

    document.getElementById("addDay").addEventListener("click", function() {

        let total = wrapper.querySelectorAll(".itinerary-item").length + 1;

        let editorId = "itinerary_description_" + total;

        let html = `
        <div class="card mb-3 itinerary-item">

            <div class="card-header d-flex justify-content-between align-items-center">

                <strong>
                    Day <span class="day-number">${total}</span>
                </strong>

                <button type="button"
                        class="btn btn-danger btn-sm removeDay">
                    <i class="fas fa-trash"></i>
                </button>

            </div>

            <div class="card-body">

                <div class="row">

                    <div class="col-md-2">
                        <label>Day</label>

                        <input type="number"
                            class="form-control"
                            name="itinerary_day[]"
                            value="${total}">
                    </div>

                    <div class="col-md-10">
                        <label>Title</label>

                        <input type="text"
                            class="form-control"
                            name="itinerary_title[]"
                            placeholder="Day Title">
                    </div>

                </div>

                <div class="mt-3">

                    <label>Description</label>

                    <input type="hidden"
                        id="${editorId}"
                        name="itinerary_description[]">

                    <trix-editor class="itinerary-editor"  input="${editorId}"></trix-editor>

                </div>

            </div>

        </div>
        `;

        wrapper.insertAdjacentHTML("beforeend", html);

    });

    document.addEventListener("click", function(e) {

        if (e.target.closest(".removeDay")) {

            let cards = wrapper.querySelectorAll(".itinerary-item");

            if (cards.length == 1) {

                alert("Minimum one day is required.");

                return;

            }

            e.target.closest(".itinerary-item").remove();

            updateDayNumbers();

        }

    });

    function updateDayNumbers() {

        wrapper.querySelectorAll(".itinerary-item").forEach(function(item, index) {

            item.querySelector(".day-number").innerHTML = index + 1;

            item.querySelector('input[name="itinerary_day[]"]').value = index + 1;

        });

    }



});
</script>
<script>
// Add Inclusion

document.getElementById("addInclusion").onclick = function() {

    document.getElementById("inclusionWrapper")
        .insertAdjacentHTML("beforeend", `

                <div class="row inclusion-item mb-2">

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

                <input class="form-control"
                name="inclusion[]">

                </div>

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

                <button class="btn btn-danger removeInclusion"
                type="button">

                <i class="fas fa-trash"></i>

                </button>

                </div>

                </div>

                `);

};


// Remove Inclusion

document.addEventListener("click", function(e) {

    if (e.target.closest(".removeInclusion")) {

        let total = document.querySelectorAll(".inclusion-item").length;

        if (total == 1) {

            alert("Minimum one inclusion required.");

            return;

        }

        e.target.closest(".inclusion-item").remove();

    }

});



// Add Exclusion

document.getElementById("addExclusion").onclick = function() {

    document.getElementById("exclusionWrapper")
        .insertAdjacentHTML("beforeend", `

                <div class="row exclusion-item mb-2">

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

                <input class="form-control"
                name="exclusion[]">

                </div>

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

                <button class="btn btn-danger removeExclusion"
                type="button">

                <i class="fas fa-trash"></i>

                </button>

                </div>

                </div>

                `);

};


// Remove Exclusion

document.addEventListener("click", function(e) {

    if (e.target.closest(".removeExclusion")) {

        let total = document.querySelectorAll(".exclusion-item").length;

        if (total == 1) {

            alert("Minimum one exclusion required.");

            return;

        }

        e.target.closest(".exclusion-item").remove();

    }

});
</script>
<script>
let validityIndex = document.querySelectorAll('.validity-card').length;


document.getElementById('addValidity').onclick = function() {

    let html = `

                    <div class="card mb-4 validity-card">

                    <div class="card-header d-flex justify-content-between">

                    <h5>Validity</h5>

                    <button type="button"
                    class="btn btn-danger removeValidity">

                    Remove

                    </button>

                    </div>

                    <div class="card-body">

                    <div class="row">

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

                    <label>Title</label>

                    <input
                    class="form-control"
                    name="validity[${validityIndex}][title]"
                    placeholder="Summer Offer">

                    </div>

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

                    <label>Valid From</label>

                    <input
                    type="date"
                    class="form-control"
                    name="validity[${validityIndex}][from]">

                    </div>

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

                    <label>Valid To</label>

                    <input
                    type="date"
                    class="form-control"
                    name="validity[${validityIndex}][to]">

                    </div>

                    </div>

                    <hr>

                    <button
                    type="button"
                    class="btn btn-success addPackageRow"
                    data-index="${validityIndex}">

                    Add Package Row

                    </button>

                    <table
                    class="table table-bordered mt-3">

                    <thead>

                    <tr>

                    <th>Rooms</th>
                    <th>Vehicle</th>
                    <th>Cost</th>
                    <th>Min Person</th>
                    <th>Meal</th>
                   
                    <th></th>

                    </tr>

                    </thead>

                    <tbody
                    id="rows_${validityIndex}">

                    </tbody>

                    </table>

                    </div>

                    </div>

                    `;

    document
        .getElementById("validityWrapper")
        .insertAdjacentHTML("beforeend", html);

    validityIndex++;

}
document.addEventListener("click", function(e) {

    if (e.target.classList.contains("addPackageRow")) {

        let i = e.target.dataset.index;

        let tbody = document.getElementById("rows_" + i);

        let row = `

                    <tr>

                    <td>

                    <input
                    class="form-control"
                    name="validity[${i}][rows][room_no][]">

                    </td>

                    <td>

                    <input
                    class="form-control"
                    name="validity[${i}][rows][vehicle][]">

                    </td>

                    <td>

                    <input
                    class="form-control"
                    name="validity[${i}][rows][cost][]">

                    </td>

                    <td>

                    <input
                    class="form-control"
                    name="validity[${i}][rows][person][]">

                    </td>

                    <td>

                    <input
                    class="form-control"
                    name="validity[${i}][rows][meal][]">

                    </td>

                   

                    <td>

                    <button
                    type="button"
                    class="btn btn-danger removeRow">

                    X

                    </button>

                    </td>

                    </tr>

                    `;

        tbody.insertAdjacentHTML("beforeend", row);

    }

});
document.addEventListener("click", function(e) {

    if (e.target.classList.contains("removeRow")) {

        e.target.closest("tr").remove();

    }

});
document.addEventListener("click", function(e) {

    if (e.target.classList.contains("removeValidity")) {

        e.target.closest(".validity-card").remove();

    }

});
</script>

@endsection

@section('css')
<style>
.itinerary-editor {
    min-height: 250px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.2.3/trix.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet">
@endsection