@extends('layout.master')

@push('plugin-styles')
    <link href="{{ asset('assets/plugins/select2/select2.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/dropify/css/dropify.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/@mdi/css/materialdesignicons.min.css') }}" rel="stylesheet" />
@endpush

@push('style')
    <style>
        .error {
            color: #F00;
            background-color: #FFF;
        }
    </style>
@endpush

@section('content')
    <nav class="page-breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Services</a></li>
            <li class="breadcrumb-item active" aria-current="page">Sections</li>
            <li class="breadcrumb-item active" aria-current="page">
                @isset($content)
                    Edit
                @else
                    Create
                @endisset Section
            </li>
        </ol>
    </nav>

    <div class="row">
        <div class="col-lg-12">
            <div class="d-flex justify-content-center">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">
                                @isset($content)
                                    Edit
                                @else
                                    Create
                                @endisset Section
                            </h4>
                            @isset($content)
                                <form method="post" action="/admin/services/contents/{{ $content->id }}" id="PostForm"
                                    enctype="multipart/form-data">
                                    @method('PUT')
                                @else
                                    <form method="post" action="/admin/services/contents" id="PostForm"
                                        enctype="multipart/form-data">
                                    @endisset
                                    <div class="col-lg-12">
                                        <div class="row">
                                            <div class="col-lg-3">
                                                <div class="mb-3">
                                                    <label for="name" class="form-label">Name</label>
                                                    <input class="form-control" name="name" id="name"
                                                        placeholder="Service Section Name"
                                                        value="@isset($content){{ $content->name }}@endisset"
                                                        type="text">
                                                </div>
                                            </div>

                                            <div class="col-lg-3">
                                                <div class="mb-3">
                                                    <label for="name" class="form-label">Section Heading</label>
                                                    <input class="form-control" name="heading" id="heading"
                                                        placeholder="Service Section Heading"
                                                        value="@isset($content){{ $content->heading }}@endisset"
                                                        type="text">
                                                </div>
                                            </div>

                                            <div class="col-lg-3">
                                                <div class="mb-3">
                                                    <label for="name" class="form-label">Display Order</label>
                                                    <input class="form-control" required name="display_order" id="display_order"
                                                        placeholder="Service Section Display Order"
                                                        value="@isset($content){{ $content->display_order }}@endisset"
                                                        type="number">
                                                </div>
                                            </div>

                                            <div class="col-lg-3">
                                                <div class="mb-3">
                                                    <label for="name" class="form-label">Section Type
                                                    </label>
                                                    <select class="form-control js-example-basic-single" name="type"
                                                        id="type">
                                                        <option>select option</option>
                                                        <option value="1"
                                                            @isset($content) @if ($content->type == 1) selected @endif @endisset>
                                                            Steps
                                                        </option>
                                                        <option value="2"
                                                            @isset($content) @if ($content->type == 2) selected @endif @endisset>
                                                            Benefits
                                                        </option>
                                                        <option value="3"
                                                            @isset($content) @if ($content->type == 3) selected @endif @endisset>
                                                            Image Section
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" id="contents">
                                        @isset($content)
                                            @if ($content->type == 1)
                                                @foreach ($content->steps as $key => $step)
                                                    <div class="col-lg-4 stepsCard mb-3">
                                                        <div class="card">
                                                            @if ($key == 0)
                                                                <div class="card-header">
                                                                    Step <i style="float: right;" class="mdi mdi-plus"
                                                                        id="addStepCard"></i>
                                                                </div>
                                                            @else
                                                                <div class="card-header">
                                                                    Step <i style="float: right;"
                                                                        class="mdi mdi-close-circle removeStepCard"></i>
                                                                </div>
                                                            @endif
                                                            <div class="card-body">
                                                                <div class="col-lg-12">
                                                                    <div class="mb-3">
                                                                        <label for="name" class="form-label">Title</label>
                                                                        <input type="hidden" name="step_id[]"
                                                                            value="{{ $step->id }}">
                                                                        <input class="form-control" name="step_title[]"
                                                                            placeholder="Step Title" value="{{ $step->title }}"
                                                                            type="text">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-12">
                                                                    <div class="mb-3">
                                                                        <label for="name" class="form-label">Short
                                                                            Description</label>
                                                                        <input class="form-control" name="step_desc[]"
                                                                            placeholder="Step Short Description"
                                                                            value="{{ $step->description }}" type="text">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-12">
                                                                    <div class="mb-3">
                                                                        <label class="form-label" for="formFile">Icon</label>
                                                                        <input class="form-control" name="step_icon[]"
                                                                            type="file" id="formFile">
                                                                    </div>
                                                                </div>
                                                                @if ($step->hasMedia('service_step'))
                                                                    <div class="col-lg-4">
                                                                        <div class="mb-3">
                                                                            <br>
                                                                            <label class="form-label" for="formFile">Previous
                                                                                Icon</label>
                                                                            <img class="img-fluid"
                                                                                src="{{ $step->getFirstMediaUrl('service_step') }}"
                                                                                alt="icon" width="40px" height="40px;">
                                                                        </div>
                                                                    </div>
                                                                @endif
                                                                <div class="pointsAdding">
                                                                    @foreach ($step->points as $pointkey => $point)
                                                                        @if ($pointkey == 0)
                                                                            <div class="row">
                                                                                <div class="col-lg-8">
                                                                                    <div class="mb-3">
                                                                                        <label class="form-label"
                                                                                            for="formFile">Points</label>
                                                                                        <input class="form-control"
                                                                                            name="step_points_{{ $key + 1 }}[]"
                                                                                            type="text"
                                                                                            value="{{ $point->points }}">
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-lg-4">
                                                                                    <button type="button"
                                                                                        data-count="{{ $key + 1 }}"
                                                                                        class="btn btn-inverse-primary addPoint"
                                                                                        style="margin-top: 28px;">Add</button>
                                                                                </div>
                                                                            </div>
                                                                        @else
                                                                            <div class="row removeAddedPoint">
                                                                                <div class="col-lg-8">
                                                                                    <div class="mb-3">
                                                                                        <label class="form-label"
                                                                                            for="formFile">Points</label>
                                                                                        <input class="form-control"
                                                                                            name="step_points_{{ $key + 1 }}[]"
                                                                                            type="text"
                                                                                            value="{{ $point->points }}">
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-lg-4">
                                                                                    <button type="button"
                                                                                        class="btn btn-inverse-danger removePoint"
                                                                                        style="margin-top: 28px;">Remove</button>
                                                                                </div>
                                                                            </div>
                                                                        @endif
                                                                    @endforeach
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @elseif ($content->type == 2)
                                                @foreach ($content->benefits as $key => $benefit)
                                                    <div class="col-lg-4 benefitsCard">
                                                        <div class="card">
                                                            @if ($key == 0)
                                                                <div class="card-header">
                                                                    Benefit <i style="float: right;" class="mdi mdi-plus"
                                                                        id="addBenefitCard"></i>
                                                                </div>
                                                            @else
                                                                <div class="card-header">
                                                                    Benefit <i style="float: right;"
                                                                        class="mdi mdi-close-circle removeBenefitsCard"></i>
                                                                </div>
                                                            @endif
                                                            <div class="card-body">
                                                                <div class="col-lg-12">
                                                                    <div class="mb-3">
                                                                        <input type="hidden" name="benefit_id[]"
                                                                            value="{{ $benefit->id }}">
                                                                        <label for="name" class="form-label">Title</label>
                                                                        <input class="form-control" name="benefit_title[]"
                                                                            placeholder="Benefit Title"
                                                                            value="{{ $benefit->title }}" type="text">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-12">
                                                                    <div class="mb-3">
                                                                        <label for="name"
                                                                            class="form-label">Description</label>
                                                                        <input class="form-control" name="benefit_desc[]"
                                                                            placeholder="Benefit Description"
                                                                            value="{{ $benefit->description }}"
                                                                            type="text">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-12">
                                                                    <div class="mb-3">
                                                                        <label class="form-label" for="formFile">Icon</label>
                                                                        <input class="form-control" name="benefit_icon[]"
                                                                            type="file" id="formFile">
                                                                        @if ($benefit->hasMedia('benefit_icon'))
                                                                            <div class="col-lg-3">
                                                                                <div class="mb-3">
                                                                                    <br>
                                                                                    <label class="form-label"
                                                                                        for="formFile">Previous
                                                                                        Icon</label>
                                                                                    <img class="img-fluid"
                                                                                        src="{{ $benefit->getFirstMediaUrl('benefit_icon') }}"
                                                                                        alt="icon" width="40px"
                                                                                        height="40px;">
                                                                                </div>
                                                                            </div>
                                                                        @endif
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @elseif ($content->type == 3)
                                                <div class="col-lg-12 contentCard">
                                                    <div class="card">
                                                        <div class="card-header">
                                                            Image Section
                                                        </div>
                                                        <div class="card-body">
                                                            <div class="col-lg-12">
                                                                <div class="mb-3">
                                                                    <input type="hidden" name="content_id"
                                                                        value="{{ $content->imageContent->id }}">
                                                                    <label for="name" class="form-label">Section
                                                                        Title</label>
                                                                    <input class="form-control" name="content_title"
                                                                        placeholder=" Title"
                                                                        value="{{ $content->imageContent->title }}"
                                                                        type="text">
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-12">
                                                                <div class="mb-3">
                                                                    <label for="name" class="form-label">Section
                                                                        Description</label>
                                                                    <textarea class="form-control" name="content_desc" placeholder=" Description">{{ $content->imageContent->description }}</textarea>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-12">
                                                                <div class="mb-3">
                                                                    <label class="form-label" for="formFile">Section
                                                                        Image</label>
                                                                    <input class="form-control" name="content_image"
                                                                        type="file" id="formFile">
                                                                    @if ($content->imageContent->hasMedia('service_image_content'))
                                                                        <div class="col-lg-3">
                                                                            <div class="mb-3">
                                                                                <br>
                                                                                <label class="form-label"
                                                                                    for="formFile">Previous
                                                                                    Icon</label>
                                                                                <img class="img-fluid"
                                                                                    src="{{ $content->imageContent->getFirstMediaUrl('service_image_content') }}"
                                                                                    alt="icon" width="40px"
                                                                                    height="40px;">
                                                                            </div>
                                                                        </div>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-lg-6">
                                                                    <div class="mb-3">
                                                                        <label class="form-label" for="formFile">Contact
                                                                            Type</label>
                                                                        <select class="form-control" name="contact_type">
                                                                            <option value="phone"
                                                                                {{ $content->imageContent->contact_type == 'phone' ? 'selecteed' : '' }}>
                                                                                Phone</option>
                                                                            <option value="whatsapp"
                                                                                {{ $content->imageContent->contact_type == 'whatsapp' ? 'selecteed' : '' }}>
                                                                                Whatsapp</option>
                                                                            <option value="email"
                                                                                {{ $content->imageContent->contact_type == 'email' ? 'selecteed' : '' }}>
                                                                                Email</option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-6">
                                                                    <div class="mb-3">
                                                                        <label class="form-label" for="formFile">Contact
                                                                        </label>
                                                                        <input class="form-control"
                                                                            placeholder="phone number or email or link"
                                                                            name="contact_value" type="text"
                                                                            value="{{ $content->imageContent->contact_value }}">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        @endisset
                                    </div>
                                    <br>
                                    <input class="btn btn-primary" type="submit" value="Submit">
                                </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('plugin-scripts')
    <script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/jquery-validation/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/dropify/js/dropify.min.js') }}"></script>
@endpush

@push('custom-scripts')
    <script>
        $(document).ready(function() {
            $('#myDropify').dropify();
            //creating slug for question
            let type = $("select[name='type']").val();
            $("select[name='type']").change(function() {
                let newType = $(this).val();
                if (newType == type) {
                    return;
                } else {
                    type = newType;
                    $("#contents").html("");
                    if (type == 1) {
                        var html = `<div class="col-lg-4 stepsCard mb-3">
                                            <div class="card">
                                                <div class="card-header">
                                                    Step <i
                                                        style="float: right;" class="mdi mdi-plus" id="addStepCard"></i>
                                                </div>
                                                <div class="card-body">
                                                    <div class="col-lg-12">
                                                        <div class="mb-3">
                                                            <label for="name" class="form-label">Title</label>
                                                            <input class="form-control" name="step_title[]"
                                                                placeholder="Step Title" value="" type="text">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-12">
                                                        <div class="mb-3">
                                                            <label for="name" class="form-label">Short
                                                                Description</label>
                                                            <input class="form-control" name="step_desc[]"
                                                                placeholder="Step Short Description" value=""
                                                                type="text">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="formFile">Icon</label>
                                                            <input class="form-control" name="step_icon[]" type="file"
                                                                id="formFile">
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-8">
                                                            <div class="mb-3">
                                                                <label class="form-label" for="formFile">Points</label>
                                                                <input class="form-control" name="step_points_1[]"
                                                                    type="text" id="formFile">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-4">
                                                            <button type="button" data-count="1"
                                                                class="btn btn-inverse-primary addPoint"
                                                                style="margin-top: 28px;">Add</button>
                                                        </div>
                                                    </div>
                                                    <div class="pointsAdding">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>`;
                    } else if (type == 2) {
                        var html = `<div class="col-lg-4 benefitsCard">
                                                <div class="card">
                                                    <div class="card-header">
                                                        Benefit <i style="float: right;"
                                                            class="mdi mdi-plus" id="addBenefitCard"></i>
                                                    </div>
                                                    <div class="card-body">
                                                        <div class="col-lg-12">
                                                            <div class="mb-3">
                                                                <label for="name" class="form-label">Title</label>
                                                                <input class="form-control" name="benefit_title[]"
                                                                    placeholder="Benefit Title" value=""
                                                                    type="text">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <div class="mb-3">
                                                                <label for="name"
                                                                    class="form-label">Description</label>
                                                                <input class="form-control" name="benefit_desc[]"
                                                                    placeholder="Benefit Description" value=""
                                                                    type="text">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <div class="mb-3">
                                                                <label class="form-label" for="formFile">Icon</label>
                                                                <input class="form-control" name="benefit_icon[]"
                                                                    type="file" id="formFile">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>`;
                    } else if (type == 3) {
                        var html = `<div class="col-lg-12 contentCard">
                                                <div class="card">
                                                    <div class="card-header">
                                                        Image Section
                                                    </div>
                                                    <div class="card-body">
                                                        <div class="col-lg-12">
                                                            <div class="mb-3">
                                                                <label for="name" class="form-label">Section
                                                                    Title</label>
                                                                <input class="form-control" name="content_title"
                                                                    placeholder=" Title" value=""
                                                                    type="text">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <div class="mb-3">
                                                                <label for="name" class="form-label">Section
                                                                    Description</label>
                                                                <textarea class="form-control" name="content_desc" placeholder=" Description" value=""></textarea>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <div class="mb-3">
                                                                <label class="form-label" for="formFile">Section
                                                                    Image</label>
                                                                <input class="form-control" name="content_image"
                                                                    type="file" id="formFile">
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-lg-6">
                                                                <div class="mb-3">
                                                                    <label class="form-label" for="formFile">Contact
                                                                        Type</label>
                                                                    <select class="form-control" name="contact_type">
                                                                        <option value="phone">Phone</option>
                                                                        <option value="whatsapp">Whatsapp</option>
                                                                        <option value="email">Email</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6">
                                                                <div class="mb-3">
                                                                    <label class="form-label" for="formFile">Contact
                                                                    </label>
                                                                    <input class="form-control"
                                                                        placeholder="phone number or email or link"
                                                                        name="contact_value" type="text">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>`;
                    }

                    $("#contents").append(html);
                }
            });
            $(document).on('click', '#addBenefitCard', function() {
                var html = `<div class="col-lg-4 benefitsCard">
                                                <div class="card">
                                                    <div class="card-header">
                                                        Benefit <i style="float: right;"
                                                            class="mdi mdi-close-circle removeBenefitsCard"></i>
                                                    </div>
                                                    <div class="card-body">
                                                        <div class="col-lg-12">
                                                            <div class="mb-3">
                                                                <label for="name" class="form-label">Title</label>
                                                                <input class="form-control" name="benefit_title[]"
                                                                    placeholder="Benefit Title" value=""
                                                                    type="text">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <div class="mb-3">
                                                                <label for="name"
                                                                    class="form-label">Description</label>
                                                                <input class="form-control" name="benefit_desc[]"
                                                                    placeholder="Benefit Description" value=""
                                                                    type="text">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <div class="mb-3">
                                                                <label class="form-label" for="formFile">Icon</label>
                                                                <input class="form-control" name="benefit_icon[]"
                                                                    type="file" id="formFile">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>`;
                $("#contents").append(html);
            });
            $(document).on('click', '#addStepCard', function() {
                var count = $(".stepsCard").length;
                var html = `<div class="col-lg-4 stepsCard">
                                <div class="card">
                                    <div class="card-header">
                                        Step <i style="float: right;" class="mdi mdi-close-circle removeStepCard"></i>
                                    </div>
                                    <div class="card-body">
                                        <div class="col-lg-12">
                                            <div class="mb-3">
                                                <label for="name" class="form-label">Title</label>
                                                <input class="form-control" name="step_title[]"
                                                    placeholder="Step Title" value="" type="text">
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="mb-3">
                                                <label for="name" class="form-label">Short
                                                    Description</label>
                                                <input class="form-control" name="step_desc[]"
                                                    placeholder="Step Short Description" value=""
                                                    type="text">
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="mb-3">
                                                <label class="form-label" for="formFile">Icon</label>
                                                <input class="form-control" name="step_icon[]" type="file"
                                                    id="formFile">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-8">
                                                <div class="mb-3">
                                                    <label class="form-label" for="formFile">Points</label>
                                                    <input class="form-control" name="step_points_` + `${count+1}` + `[]"
                                                        type="text" id="formFile">
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <button type="button" data-count="` + `${count+1}` + `"
                                                    class="btn btn-inverse-primary addPoint"
                                                    style="margin-top: 28px;">Add</button>
                                            </div>
                                        </div>
                                        <div class="pointsAdding">
                                        </div>
                                    </div>
                                </div>
                            </div>`;

                $("#contents").append(html);
            });

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

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

            $(document).on('click', '.addPoint', function(e) {
                //get element attribute
                var count = $(this).attr('data-count');
                var html = `<div class="row removeAddedPoint">
                                <div class="col-lg-8">
                                    <div class="mb-3">
                                        <label class="form-label" for="formFile">Points</label>
                                        <input class="form-control" name="step_points_` + `${count}` + `[]"
                                            type="text" id="formFile">
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <button type="button"
                                        class="btn btn-inverse-danger removePoint"
                                        style="margin-top: 28px;">Remove</button>
                                </div>
                            </div>`;
                $(this).closest('.card-body').find('.pointsAdding').append(html);
            });

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


            //select2
            if ($(".js-example-basic-single").length) {
                $(".js-example-basic-single").select2({
                    placeholder: "Choose a option",
                    allowClear: true
                });
            }

            $("#PostForm").validate({
                ignore: [],
                rules: {
                    name: {
                        required: true,
                        minlength: 3
                    },
                    heading: {
                        required: true,
                    },
                    type: {
                        required: true,
                    },
                },
                submitHandler: function(form, e) {
                    e.preventDefault();
                    var method = $(form).attr('method');
                    var url = $(form).attr('action');
                    var formData = new FormData(form);
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                        }
                    });
                    $.ajax({
                        type: method,
                        url: url,
                        contentType: false,
                        processData: false,
                        data: formData,
                        success: function(result) {
                            if (result) {
                                @isset($content)
                                @else
                                    form.reset();
                                    $(".js-example-basic-single").val('').trigger(
                                        'change');
                                @endisset
                                const Toast = Swal.mixin({
                                    toast: true,
                                    position: 'top-end',
                                    showConfirmButton: false,
                                    timer: 2000,
                                    timerProgressBar: true,
                                });

                                Toast.fire({
                                    icon: 'success',
                                    title: result.message,
                                })
                            }
                        },
                        error: function(data) {
                            const Toast = Swal.mixin({
                                toast: true,
                                position: 'top-end',
                                showConfirmButton: false,
                                timer: 2000,
                                timerProgressBar: true,
                            });

                            Toast.fire({
                                icon: 'error',
                                title: 'Something went wrong',
                            })

                            if (data.responseJSON['errors']) {

                                let err = data.responseJSON['errors'];

                                $.each(err, (i, j) => {
                                    $(`input[name=${i}]`).after(
                                        `<span class="text-danger">${j}</span>`);
                                });
                            }
                        }
                    });
                    return false;
                }
            });

        });
    </script>
@endpush