@extends('admin.layouts.masterlayout')

@section('title', 'Add Shop')
@section('head_title', 'Shop Management')

@section('Css')
<link href="{{ asset('assets/css/bootstrap-tagsinput.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection
@section('content')
<div class="dashboard-body-content">
    <div class="dashboard-breadcrumb-section">
        <h2>Add New Shop </h2>
        <p><a href="{{ route('admin.shopManagement') }}"> Shop Management </a>/ Add New Shop</p>
    </div>

    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <form id="add_shop_form" method="POST" action="{{ route('admin.storeShop') }}" enctype="multipart/form-data">
        <div class="row">
            @csrf

            <div class="col-lg-6 mb-4">
                <div class="ct-admin-container mb-4 h-100">
                    <div class="card h-100">
                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                            <div class="card-title mb-0">
                                <h2>Shop Details</h2>
                            </div>
                            <div class="form-check form-check-toggle form-switch ps-3 ps-md-0">
                                <input type="hidden" name="active" value="0">
                                <input class="form-check-input" type="checkbox" role="switch" id="active" name="active" value="1" {{ old('active', 'checked' ?? '') }}>
                                <label class="form-check-label" for="active">Is Active?</label>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="mb-4">
                                <div class="d-flex gap-4 flex-wrap profile-image-shop">
                                    <div>
                                        <div class="profile-image">
                                            <img src="{{ asset('assets/img/dashboard/user-image.png') }}" id="image_preview" class="profile-image image-preview" onerror="this.src='{{ asset('assets/img/dashboard/user-image.png') }}'">
                                            <div class="profile-image-position">
                                                <img src="{{asset('assets/img/dashboard/camera.png')}}" alt="">
                                                <input type="file" class="file-input" name="shop_img" id="shop_img">
                                            </div>
                                        </div>
                                        <div class="shop_img_error_msg"></div>
                                    </div>

                                    <div class="input-file-main">
                                        <label for="shop">Shop Name<span class="required-star">*</span></label>
                                        <div class="auth-input-position">
                                            <input type="text" id="shopname" name="shopname" placeholder="Enter Shop Name" class="form-control" value="{{ old('shopname') }}">
                                            <div class="auth-input-icon">
                                                <img src="{{ asset('assets/img/Shop-location.png') }}" alt="">
                                            </div>
                                        </div>
                                        <div class="shopname_error_msg"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-6  mb-4">
                                    <label for="owner-name">Owner Name<span class="required-star">*</span></label>
                                    <div class="auth-input-position">
                                        <input type="text" id="ownername" name="ownername" placeholder="Enter Owner Name" value="{{ old('ownername') }}" class="form-control">
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/role-icon.png') }}" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6  mb-4">
                                    <label for="owner-name">Contact Number<span class="required-star">*</span></label>
                                    <div class="auth-input-position">
                                        <input type="text" id="phone" name="phone" value="{{ old('phone') }}" placeholder="Enter Your Contact Number" class="form-control phone-number-restriction">
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/call.png') }}" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-12 mb-4">
                                    <label for="owner-name">Email Address<span class="required-star">*</span></label>
                                    <div class="auth-input-position">
                                        <input type="text" placeholder="Enter Your Business Email" class="form-control" name="email" id="email" value="{{ old('email') }}">
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/mail.png') }}" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12  mb-4">
                                    <label for="owner-name">Shop Address<span class="required-star">*</span></label>
                                    <div class="auth-input-position">
                                        <input type="text" id="autocomplete" name="full_address" placeholder="Enter address" class="form-control">

                                        <input type="hidden" name="latitude" id="latitude">
                                        <input type="hidden" name="longitude" id="longitude">
                                        <input type="hidden" name="city" id="city">
                                        <input type="hidden" name="state" id="state">
                                        <input type="hidden" name="postal_code" id="postal_code">
                                        <input type="hidden" name="country" id="country">

                                        <div class="auth-input-icon">
                                            <img src="{{asset('assets/img/location.png')}}" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12 mb-4">
                                    <label for="shop_id">Select Currency<span class="required-star">*</span></label>
                                    <div class="auth-input-position">
                                        <select class="form-control form-menu" id="currency" name="currency_code">
                                            <option value="">-- Select a Currency --</option>
                                            @foreach($currencies as $currency)
                                            <option value="{{ $currency }}" {{ old('currency') == $currency ? 'selected' : '' }}>
                                                {{ $currency }}
                                            </option>
                                            @endforeach
                                        </select>
                                        <div class="auth-input-icon">
                                            <img src="{{asset('assets/img/dollar.png')}}" alt="">
                                        </div>
                                    </div>
                                    <div class="currency_code_error"></div>
                                </div>

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

            <div class="col-lg-6 mb-4">
                <div class="ct-admin-container h-100">
                    <div class="card h-100">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="card-title mb-0">
                                <h2>Other Details</h2>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <div class="row align-items-end">
                                    <div class="col-md-5">
                                        <div class="error-placement-div">
                                            <label for="availability">Select Start Time<span class="required-star">*</span></label>
                                            <div class="date-width">
                                                <div class="input-group date custom_date_input">
                                                    <input type="text" class="input-group-addon form-control" id="main_start_hours" name="main_start_hours" value="09:00 AM">
                                                    <span class="clock-icon"><i class="fa fa-clock-o" aria-hidden="true"></i></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-5">
                                        <div class="error-placement-div">
                                            <label for="availability">Select End Time<span class="required-star">*</span></label>
                                            <div class="date-width">
                                                <div class="input-group date custom_date_input">
                                                    <input type="text" class="form-control input-group-addon" id="main_end_hours" name="main_end_hours" value="06:00 PM">
                                                    <span class="clock-icon"><i class="fa fa-clock-o" aria-hidden="true"></i></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="mb-lg-20">
                                            <button type="button" class="ct-btn add_time_btn">ADD</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="main_hours_error_msg"></div>
                            </div>

                            <div class="row">
                                @foreach($week_days as $day)
                                <div class="col-md-6 mt-2">
                                    <div class="day-card d-flex align-items-center flex-wrap justify-content-between">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="{{ $loop->iteration }}" name="days[]" id="{{ $day }}" checked>
                                            <label class="form-check-label" for="{{ $day }}">{{ ucfirst($day) }}</label>
                                        </div>

                                        <div class="d-flex gap-2 align-items-center">
                                            <!-- Display -->
                                            <span id="day_{{ $loop->iteration }}_start_hours_text">00:00</span>
                                            <span id="day_{{ $loop->iteration }}_dash"> – </span>
                                            <span id="day_{{ $loop->iteration }}_end_hours_text">00:00</span>
                                            <span class="text-danger d-none" id="day_{{ $loop->iteration }}_unavailable_text">Unavailable</span>

                                            <!-- Hidden inputs -->
                                            <input type="hidden" id="day_{{ $loop->iteration }}_start_hours" name="start_hours[{{ $loop->iteration }}]" value="00:00 AM">
                                            <input type="hidden" id="day_{{ $loop->iteration }}_end_hours" name="end_hours[{{ $loop->iteration }}]" value="00:00 PM">
                                            <button type="button" class="edit-day-time-btn" data-day-index="{{ $loop->iteration }}" id="day_{{ $loop->iteration }}_edit_button">
                                                <img class="action-icon" src="{{asset('assets/img/dashboard/edit.png')}}" alt="Edit">
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            <div class="days_error_msg"></div>

                            <div id="socialLinksContainer" class="mt-4">
                                <label for="availability">Social Links</label>
                                <div class="mb-4">
                                    <div class="d-flex gap-4  align-items-center">
                                        <!-- loop this section on click add icon -->
                                        <div class="input-file-main">
                                            <div class="auth-input-position">
                                                <input type="text" class="form-control social_link" placeholder="Add Social Link" name="social_link[]">
                                                <div class="auth-input-icon">
                                                    <img src="{{ asset('assets/img/link.png') }}" alt="">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="add-icon add_link">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"
                                                viewBox="0 0 26 26" fill="none">
                                                <path d="M19.5 13.3125H6.5C6.33198 13.3125 6.1875 13.168 6.1875 13C6.1875 12.832 6.33198 12.6875 6.5 12.6875H19.5C19.668 12.6875 19.8125 12.832 19.8125 13C19.8125 13.168 19.668 13.3125 19.5 13.3125Z"
                                                    fill="#4D4B4B" stroke="#4D4B4B" />
                                                <path d="M13 19.8125C12.832 19.8125 12.6875 19.668 12.6875 19.5V6.5C12.6875 6.33198 12.832 6.1875 13 6.1875C13.168 6.1875 13.3125 6.33198 13.3125 6.5V19.5C13.3125 19.668 13.168 19.8125 13 19.8125Z"
                                                    fill="#4D4B4B" stroke="#4D4B4B" />
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="social_link_error_msg"></div>
                                </div>
                            </div>

                            <div class="add-expertise-box">
                                <label for="availability">Add Expertise<span class="required-star">*</span> </label>
                                <div class="mb-4">
                                    <div class="d-flex gap-4 align-items-center">
                                        <!-- loop this section on click add icon -->
                                        <div class="input-file-main">
                                            <div class="auth-input-position auth-input-position-expertise">
                                                <div class="auth-input-icon">
                                                    <img src="{{ asset('assets/img/briefcase.png') }}" alt="">
                                                </div>
                                                <input type="text" class="form-control" placeholder="Write here your expertise" name="expertiseInput" id="expertiseInput" data-role="tagsinput" value="{{ old('expertiseInput') }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="expertise_error_msg"></div>
                                </div>
                            </div>

                            <div class="file-upload-wrapper">
                                <label for="Upload">Upload Portfolio</label>
                                <div class="ct-file-flex">
                                    <div>
                                        <div class="ct-file-container ct-file-shop-container">
                                            <input type="file" class="ct-file-input" name="shop_portfolio[]" id="shop_portfolio" multiple>
                                            <div class="d-flex gap-3 flex-wrap justify-content-center align-items-center">
                                                <img src="{{asset('assets/img/upload-icon.png')}}" alt="">
                                                <p>Upload Photos</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="portfolio-preview-container" class="file-container-upload">
                                    </div>
                                </div>
                                <div class="portfolio_error_msg"></div>
                            </div>

                            <div class="mt-4">
                                <label for="Upload1">Upload Business License/ID Proof<span class="required-star">*</span> </label>
                                <div class="ct-file-flex">
                                    <div>
                                        <div class="ct-file-container ct-file-shop-container">
                                            <input type="file" class="ct-file-input" name="business_proof_image" id="business_proof_image">
                                            <div class="d-flex gap-3 flex-wrap justify-content-center align-items-center">
                                                <img src="{{ asset('assets/img/upload-icon.png') }}" alt="">
                                                <p>Upload Proof</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="preview_business_proof_img file-container-upload">
                                    </div>
                                </div>
                                <div class="business_proof_image_error_msg"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="d-flex gap-3 submit-container">
            <a href="{{ route('admin.shopManagement', ['tab' => 'verified']) }}" class="ct-outline-btn text-center">Cancel</a>
            <button type="submit" class="ct-btn add_shop_btn"> <span>Save</span> </button>
        </div>
    </form>
</div>
@include('admin.shop.availability_day')
@endsection

@section('script')
<script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&libraries=places"></script>
<script src="{{ asset('assets/js/fileUploads.js') }}"></script>
<script src="{{ asset('assets/js/bootstrap-tagsinput.js') }}"></script>
<script src="{{ asset('assets/js/select2.min.js') }}"></script>

<script>
    $(document).ready(function() {
        $("#expertiseInput").tagsinput('items');
        $("#currency").select2();

        // Upload Portfolio
        $("#shop_portfolio").fileUpload({
            maxFileSize: 5, // 2 MB
            allowedFileTypes: ['jpg', 'gif', 'jpeg', 'png'], // small case
            parentsElementOfInputFiles: 'file-upload-wrapper', // Class of parent div of input files which include list of files
            appendFilesClass: 'file-container-upload', // Class of Files listed
            isShowProgressBar: 0,
        });

        // Add Shop form validation
        $('#add_shop_form').validate({
            ignore: [],
            onkeyup: false,
            rules: {
                shopname: {
                    required: true,
                    minlength: minInput,
                    maxlength: maxInput
                },
                ownername: {
                    required: true,
                    minlength: minInput,
                    maxlength: maxInput
                },
                phone: {
                    required: true,
                    minlength: minInput,
                    maxlength: maxInput,
                    phoneValidation: true
                },
                email: {
                    required: true,
                    email: true,
                    maxlength: maxInput,
                    customEmailValidation: true,
                    remote: {
                        url: "{{ route('admin.check.email') }}",
                        type: "POST",
                        data: {
                            email: function() {
                                return $("#email").val();
                            }
                        },
                        dataType: "json",
                        dataFilter: function(data) {
                            console.log('dfd');

                            var jsonResponse = JSON.parse(data);
                            return jsonResponse.exists ? false : true;
                        }
                    }
                },
                full_address: {
                    required: true,
                    maxlength: maxInput
                },
                currency_code: {
                    required: true,
                },
                'days[]': {
                    requireOneDay: true
                },
                main_start_hours: {
                    required: true
                },
                main_end_hours: {
                    required: true,
                    timeCompare: {
                        startTimeSelector: "#main_start_hours"
                    }
                },
                shop_img: {
                    extension: "jpg|jpeg|png|gif",
                    fileSize: 5 // 5MB
                },
                expertiseInput: {
                    required: true
                },
                'shop_portfolio[]': {
                    maxFiles: 20,
                    checkValidFileUpload: true
                },
                business_proof_image: {
                    required: true,
                    extension: "jpg|jpeg|png|gif",
                    fileSize: 5 // 5MB
                },
            },
            errorPlacement: function(error, element) {
                if (element.attr("name") === "shop_img") {
                    $(".shop_img_error_msg").html(error);
                } else if (element.attr("name") === "shopname") {
                    $(".shopname_error_msg").html(error);
                } else if (element.attr("name") === "days[]") {
                    $(".days_error_msg").html(error);
                } else if (element.attr("name") === "social_link[]") {
                    $(".social_link_error_msg").html(error);
                } else if (element.attr("name") === "expertiseInput") {
                    $(".expertise_error_msg").html(error);
                } else if (element.attr("name") === "shop_portfolio[]") {
                    $(".portfolio_error_msg").html(error);
                } else if (element.attr("name") === "business_proof_image") {
                    $(".business_proof_image_error_msg").html(error);
                } else if (element.attr("name") === "main_start_hours" || element.attr("name") === "main_end_hours") {
                    $(element).parents('.error-placement-div').append(error);
                } else if (element.attr("name") == "currency_code") {
                    $(".currency_code_error").html(error);
                } else {
                    error.insertAfter(element); // Default behavior for other fields
                }
            },
            messages: {
                email: {
                    remote: "This email already exists."
                },
            },
            submitHandler: function(form) {
                $('.add_shop_btn').attr('disabled', true);
                $('.add_shop_btn').addClass('loader-active');
                form.submit(); // Submit the form when valid
            }
        });

        $('#add_shop_form').on('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault(); // Prevent form submission on Enter key
                return false;
            }
        });

        // Edit day time validation
        $('#editDayTimeForm').validate({
            rules: {
                edit_start_time: {
                    required: true
                },
                edit_end_time: {
                    required: true,
                    timeCompare: {
                        startTimeSelector: "#edit_start_time"
                    }
                }
            },
            errorPlacement: function(error, element) {
                if (element.attr("name") === "edit_end_time") {
                    $(".edit_endtime_error").html(error);
                } else if (element.attr("name") === "edit_start_time") {
                    $(".edit_starttime_error").html(error);
                } else {
                    error.insertAfter(element); // Default behavior for other fields edit_starttime_error
                }
            },
            submitHandler: function(form) {
                // Optional: if you're using a submit button
                form.submit();
            }
        });

        // add time button click
        $('.add_time_btn').on('click', function() {
            const startTime = $('#main_start_hours').val();
            const endTime = $('#main_end_hours').val();

            for (let i = 1; i <= 7; i++) {
                const checkbox = $('#' + getDayName(i));

                if (checkbox.prop('checked')) {
                    $('#day_' + i + '_start_hours_text').text(startTime);
                    $('#day_' + i + '_end_hours_text').text(endTime);
                    $('#day_' + i + '_start_hours').val(startTime);
                    $('#day_' + i + '_end_hours').val(endTime);

                    $('#day_' + i + '_time_text').show();
                    $('#day_' + i + '_dash').show();
                    $('#day_' + i + '_unavailable_text').addClass('d-none');
                    $('#day_' + i + '_edit_button').removeClass('d-none');
                }
            }
        });

        $(".add_time_btn").click();

        $('#shop_img').on('change', function(e) {
            var reader = new FileReader();
            reader.onload = function(event) {
                $('#image_preview').attr('src', event.target.result);
            };
            reader.readAsDataURL(e.target.files[0]);
        });

        // Edit button logic
        $('.edit-day-time-btn').on('click', function() {
            const dayIndex = $(this).data('day-index');
            const startTime = $('#day_' + dayIndex + '_start_hours').val();
            const endTime = $('#day_' + dayIndex + '_end_hours').val();

            $('#edit_day_index').val(dayIndex);
            $('#edit_start_time').val(startTime);
            $('#edit_end_time').val(endTime);

            $('#editDayTimeModal').modal('show');
        });

        // Save edited time
        $('#saveDayTimeBtn').on('click', function() {
            if ($('#editDayTimeForm').valid()) {
                const dayIndex = $('#edit_day_index').val();
                const startTime = $('#edit_start_time').val();
                const endTime = $('#edit_end_time').val();

                $('#day_' + dayIndex + '_start_hours').val(startTime);
                $('#day_' + dayIndex + '_end_hours').val(endTime);
                $('#day_' + dayIndex + '_start_hours_text').text(startTime);
                $('#day_' + dayIndex + '_end_hours_text').text(endTime);

                $('#day_' + dayIndex + '_time_text').show();
                $('#day_' + dayIndex + '_dash').show();
                $('#day_' + dayIndex + '_unavailable_text').addClass('d-none');
                $('#day_' + dayIndex + '_edit_button').removeClass('d-none');

                $('#editDayTimeModal').modal('hide');
            }
        });

        // Initial state setup
        $('input[name="days[]"]').each(function() {
            $(this).trigger('change');
        });

        // Handle checkbox toggle
        $('input[name="days[]"]').on('change', function() {
            const dayIndex = $(this).val();
            const isChecked = $(this).is(':checked');

            if (isChecked) {
                const startTime = $('#main_start_hours').val();
                const endTime = $('#main_end_hours').val();

                $('#day_' + dayIndex + '_start_hours_text').text(startTime);
                $('#day_' + dayIndex + '_end_hours_text').text(endTime);
                $('#day_' + dayIndex + '_start_hours').val(startTime);
                $('#day_' + dayIndex + '_end_hours').val(endTime);

                $('#day_' + dayIndex + '_time_text').show();
                $('#day_' + dayIndex + '_dash').show();
                $('#day_' + dayIndex + '_unavailable_text').addClass('d-none');
                $('#day_' + dayIndex + '_edit_button').removeClass('d-none');
            } else {
                $('#day_' + dayIndex + '_start_hours_text').text('');
                $('#day_' + dayIndex + '_end_hours_text').text('');
                $('#day_' + dayIndex + '_start_hours').val('Unavailable');
                $('#day_' + dayIndex + '_end_hours').val('Unavailable');

                $('#day_' + dayIndex + '_time_text').hide();
                $('#day_' + dayIndex + '_dash').hide();
                $('#day_' + dayIndex + '_unavailable_text').removeClass('d-none');
                $('#day_' + dayIndex + '_edit_button').addClass('d-none');
            }
        });
    });

    $('#editDayTimeModal').on('hidden.bs.modal', function(e) {
        $("#editDayTimeForm").validate().resetForm(); // Removes error messages
        $("#editDayTimeForm")[0].reset();
    });

    // START: Add google address 
    function initAutocomplete() {
        const input = document.getElementById('autocomplete');
        const autocomplete = new google.maps.places.Autocomplete(input, {
            types: ['geocode']
        });

        autocomplete.addListener('place_changed', () => {
            const place = autocomplete.getPlace();

            // Get lat/lng
            const lat = place.geometry.location.lat();
            const lng = place.geometry.location.lng();

            $('#latitude').val(lat);
            $('#longitude').val(lng);

            // Extract components
            const components = {
                locality: 'city',
                administrative_area_level_1: 'state',
                postal_code: 'postal_code',
                country: 'country'
            };

            for (const component of place.address_components) {
                const type = component.types[0];
                if (components[type]) {
                    document.getElementById(components[type]).value = component.long_name;
                }
            }
        });
    }
    google.maps.event.addDomListener(window, 'load', initAutocomplete);
    // END: Add google address 

    // START: Add link to append div
    $(document).on('click', '.add_link', function() {
        const newRow = `<div class="mb-4 social-link-row custom-error-div">
            <div class="d-flex gap-4 align-items-center">
                <div class="input-file-main">
                    <div class="auth-input-position">
                        <input type="text" class="form-control custom-validation" placeholder="Add Social Link" name="social_link[]">
                        <div class="auth-input-icon">
                            <img src="{{ asset('assets/img/link.png') }}" alt="">
                        </div>
                    </div>
                </div>
                <div class="add-icon remove_link c-pointer">
                    <!-- Minus icon -->
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24">
                        <path fill="#000" d="M19 13H5v-2h14z" />
                    </svg>
                </div>
            </div>
            <div class="custom-error"></div>
        </div>`;
        $('#socialLinksContainer').append(newRow);
    });

    $(document).on('click', '.remove_link', function() {
        $(this).closest('.social-link-row').remove();
    });
    // END: Add link to append div

    // Business proof Image  
    $('#business_proof_image').on('change', function() {
        const file = this.files[0];
        const previewContainer = $('.preview_business_proof_img');
        const maxSize = 5 * 1024 * 1024; // 5MB size limit


        if (file.size > maxSize) {
            custom_message('error', 'File is too large. Please upload a file smaller than 5 MB.');
            this.value = ''; // Clear input
            return;
        }
        previewContainer.empty(); // Clear previous preview
        const reader = new FileReader();

        reader.onload = function(e) {

            const img = $('<img>', {
                src: e.target.result,
                alt: 'Preview',
                class: 'ct-file-images image-preview'
            }).on('error', function() {
                $(this).attr('src', '{{ asset("assets/img/dashboard/default_img.jpg") }}');
            })

            const wrapper = $('<div>', {
                class: 'ct-file-image'
            });
            wrapper.append(img);
            previewContainer.append(wrapper);
        };


        reader.readAsDataURL(file);
    });
</script>

@endsection