@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">
                        @foreach ($categories as $category)
                        <option value="{{ $category->id }}" @if (isset($destinations) && $category->id ===
                            $destinations->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>
                    <input type="text" class="form-control" name="duration" id="duration"
                        value="{{ isset($destinations) ? $destinations->duration : '' }}"
                        placeholder="e.g. 7 Days / 6 Nights">
                </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-6">
                    <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-6">
                    @if (isset($destination))
                    <div class="mb-3">
                        <label class="form-label">Current Image</label>
                        <img src="{{ asset($destination->image) }}" alt="" class="img-preview d-block w-100">
                    </div>
                    @endif

                    <div class="mb-3">
                        <label for="image"
                            class="form-label">{{ isset($destination) ? 'Replace Image' : 'Image' }}</label>
                        <input type="file" class="form-control" name="image" id="image">
                    </div>
                </div>
            </div>

            <hr>

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

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

            <div id="featureWrapper">

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

                    @foreach($destinations->features as $feature)

                        <div class="card mb-3 feature-item">
                            <div class="card-body">

                                <div class="row">

                                    <div class="col-md-3">
                                        <label>FontAwesome Icon</label>

                                        <input type="text"
                                            class="form-control"
                                            name="feature_icon[]"
                                            value="{{ $feature['icon'] ?? '' }}"
                                            placeholder="fa-solid fa-hotel">

                                        <small class="text-muted">
                                            Example : fa-solid fa-hotel
                                        </small>
                                    </div>

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

                                        <input type="text"
                                            class="form-control"
                                            name="feature_title[]"
                                            value="{{ $feature['title'] ?? '' }}">
                                    </div>

                                    <div class="col-md-4">
                                        <label>Subtitle</label>

                                        <input type="text"
                                            class="form-control"
                                            name="feature_subtitle[]"
                                            value="{{ $feature['subtitle'] ?? '' }}">
                                    </div>

                                    <div class="col-md-1 d-flex align-items-end">
                                        <button class="btn btn-danger removeFeature" type="button">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>

                                </div>

                            </div>
                        </div>

                    @endforeach

                @else

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

                    <div class="card-body">

                        <div class="row">

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

                                <label>Icon</label>

                                <input type="text" class="form-control" name="feature_icon[]"
                                    placeholder="fa-solid fa-hotel">

                            </div>

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

                                <label>Title</label>

                                <input type="text" class="form-control" name="feature_title[]" placeholder="Hotel Stay">

                            </div>

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

                                <label>Subtitle</label>

                                <input type="text" class="form-control" name="feature_subtitle[]"
                                    placeholder="Comfort Rooms">

                            </div>

                            <div class="col-md-1 d-flex align-items-end">

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

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

                                </button>

                            </div>

                        </div>

                    </div>

                </div>

                @endif

            </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($destination) ? 'Update Destination' : 'Create Destination' }}
            </button>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<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') {
        $('.tags-selector').select2();
    }
});

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


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

        let html = `

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

        <div class="card-body">

        <div class="row">

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

        <label>Icon</label>

        <input class="form-control"
        name="feature_icon[]"
        placeholder="fa-solid fa-car">

        </div>

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

        <label>Title</label>

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

        </div>

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

        <label>Subtitle</label>

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

        </div>

        <div class="col-md-1 d-flex align-items-end">

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

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

        </button>

        </div>

        </div>

        </div>

        </div>

        `;

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

    };

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

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

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

            if (total == 1) {

                alert("Minimum one feature required.");

                return;

            }

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

        }

    });

    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