@extends('admin.layouts.masterlayout')

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

@section('Css')
<link href="{{ asset('assets') }}/css/flatpickr/flatpickr.min.css" rel="stylesheet" type="text/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 Artist </h2>
        <p><a href="{{route('admin.artistManagement')}}"> Artist Management </a>/ Add New Artist</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_artist_form" method="POST" action="{{route('admin.storeArtist')}}" 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>Artist Details</h2>
                            </div>
                            <div class="form-check form-check-toggle form-switch ps-3 ps-md-0">
                                <input type="hidden" name="active" value="inactive">
                                <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" alt="" 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="artist_img" id="artist_img">
                                            </div>
                                        </div>
                                        <div class="shop_img_error_msg"></div>
                                    </div>
                                    <div class="input-file-main">
                                        <label for="shop">Artist Name<span class="required-star">*</span></label>
                                        <div class="auth-input-position">
                                            <input type="text" id="artistname" name="artistname" placeholder="Name" class="form-control" value="{{ old('artistname') }}">
                                            <div class="auth-input-icon">
                                                <img src="{{ asset('assets/img/role-icon.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">Professional Title<span class="required-star">*</span></label>
                                    <div class="auth-input-position">
                                        <input type="text" id="Professional_title" name="Professional_title" placeholder="Enter Title" value="{{ old('Professional_title') }}"
                                            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-6 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-6  mb-4">
                                    <label for="owner-name">Experience<span class="required-star">*</span></label>
                                    <div class="auth-input-position">
                                        <select class="form-control form-menu" id="experiance" name="experiance">
                                            <option value="">Select Experience</option>
                                            <option value="<1 year">&lt;1 year</option>
                                            <option value="1 year">1 year</option>
                                            <option value="2 year">2 year</option>
                                            <option value="3 year">3 year</option>
                                            <option value="4 year">4 year</option>
                                            <option value="5 year">5 year</option>
                                            <option value="6 year">6 year</option>
                                            <option value="7 year">7 year</option>
                                            <option value="8 year">8 year</option>
                                            <option value="9 year">9 year</option>
                                            <option value="10 year">10 year</option>
                                            <option value="10+ year">10+ year</option>
                                        </select>
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/briefcase.png') }}" alt="">
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div class="mb-4">
                                <label for="notes">Bio</label>
                                <div class="auth-input-position">
                                    <textarea class="form-control " id="bio" name="bio" placeholder="Enter Your Bio">{{ old('bio') }}</textarea>
                                    <div class="auth-input-icon">
                                        <img src="{{ asset('assets/img/dashboard/edit.png') }}" alt="">
                                    </div>
                                </div>
                            </div>

                            <div>
                                <div id="socialLinksContainer">
                                    <label for="availability">Social Links</label>
                                    <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" 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>
                                <div class="social_link_error_msg"></div>
                            </div>

                            <div class="add-expertise-box mt-4">
                                <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="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 class="mt-4 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="artist_portfolio[]" id="artist_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>
                    </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-4">
                                <label for="shop_id">Select Shop</label>
                                <div class="auth-input-position">
                                    <select class="form-control form-menu" id="shop_id" name="shop_id">
                                        <option value="">-- Select a Shop --</option>
                                        @foreach($shops as $shop)
                                        <option value="{{ $shop->id }}" {{ old('shop_id') == $shop->id ? 'selected' : '' }}>
                                            {{ $shop->shop_name }}
                                        </option>
                                        @endforeach
                                    </select>
                                    <div class="auth-input-icon">
                                        <img src="{{asset('assets/img/dashboard/Shop.png')}}" alt="">
                                    </div>
                                </div>
                            </div>

                            <div id="shopTypeSection" class="mb-4" style="display: none;">
                                <label>Type<span class="required-star">*</span></label>
                                <div class="mb-3">
                                    <label class="d-flex gap-3 align-items-center mb-2">
                                        <input type="radio" name="artist_type" value="in_shop" {{ old('artist_type') == 'in_shop' ? 'checked' : '' }}>
                                        <strong>In Shop Artist</strong>
                                    </label>
                                    <label class="d-flex gap-3 align-items-center mb-2">
                                        <input type="radio" name="artist_type" value="guest" {{ old('artist_type') == 'guest' ? 'checked' : '' }}>
                                        <strong>Guest Artist</strong>
                                    </label>
                                    <div class="artist_type_error"></div>
                                </div>
                                <label for="shop_id">Preferred Payment Type<span class="required-star">*</span></label>
                                <div class="auth-input-position">
                                    <select class="form-control form-menu" id="payment_type" name="payment_type">
                                        <option value="">Select Payment Type</option>

                                        <option value="0">Commission</option>
                                        <option value="1">Salary With Commission</option>
                                        <option value="2">Salary</option>

                                    </select>
                                    <div class="auth-input-icon">
                                        <img src="{{asset('assets/img/Filter.png')}}" alt="">
                                    </div>
                                </div>
                                <div class="commission_div mt-2" id="">
                                    <label for="commision_percentage">Commission</label>
                                    <div class="auth-input-position">
                                        <input type="text" id="commision_percentage" name="commision_percentage" placeholder="Enter Commission" class="form-control">
                                        <div class="auth-input-icon">
                                            <img src="{{asset('assets/img/commision.png')}}" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div id="guestAvailabilitySection" style="display: none;">
                                <div class="w-100 start-end-section d-none">
                                    <div class="row">
                                        <div class="col-md-6 mb-4">
                                            <label for="start_date">Start Date<span class="required-block">*</span></label>
                                            <div class="auth-input-position auth-input-position-datepicker">
                                                <input type="text" name="start_date" id="start_date" class="form-control flatpickr" placeholder="Select Start Date" value="{{ old('start_date') }}">
                                                <div class="auth-input-icon">
                                                    <img src="{{ asset('assets/img/dashboard/calendar.png') }}" alt="">
                                                </div>
                                            </div>
                                            <div class="start_date_error_msg"></div>
                                        </div>
                                        <div class="col-md-6 mb-4">
                                            <label for="end_date">End Date<span class="required-block">*</span></label>
                                            <div class="auth-input-position auth-input-position-datepicker">
                                                <input type="text" name="end_date" id="end_date" class="form-control flatpickr" placeholder="Select End Date" value="{{ old('end_date') }}">
                                                <div class="auth-input-icon">
                                                    <img src="{{ asset('assets/img/dashboard/calendar.png') }}" alt="">
                                                </div>
                                            </div>
                                            <div class="end_date_error_msg"></div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Start/End Time Inputs --}}
                                <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="input-group-addon form-control " 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>

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

                                                <div class="d-flex gap-2 align-items-center">
                                                    <span id="day_{{ $loop->iteration }}_start_hours_text" class="date_fix_font">00:00</span>
                                                    <span id="day_{{ $loop->iteration }}_dash"> – </span>
                                                    <span id="day_{{ $loop->iteration }}_end_hours_text" class="date_fix_font">00:00</span>

                                                    <span class="text-danger date_fix_font" id="day_{{ $loop->iteration }}_unavailable_text" style="display: none;">Unavailable</span>

                                                    <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="" src="{{asset('assets/img/dashboard/edit.png')}}" alt="Edit">
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="day-timing-error custom-error"></div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                                <div class="days_error_msg"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="d-flex gap-3 submit-container">
            <a href="{{ route('admin.artistManagement')}}" class="ct-outline-btn text-center">Cancel</a>
            <button type="submit" class="ct-btn add_artist_btn"> <span>Save</span> </button>
        </div>
    </form>
</div>

@include('admin.shop.availability_day')
@endsection

@section('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 src="{{ asset('assets') }}/js/flatpickr.js"></script>
<script>
    $(document).ready(function() {
        $("#expertiseInput").tagsinput('items');
        $("#shop_id").select2();
        $("#currency").select2();

        // Flatpickr initialization
        const startDatePicker = flatpickr("#start_date", {
            dateFormat: "Y-m-d",
            altInput: true,
            altFormat: "d-m-Y",
            altInputClass: "form-control flatpickr-alt",
            minDate: "today",
            onChange: function(selectedDates, dateStr, instance) {
                endDatePicker.set("minDate", dateStr);
            }
        });

        const endDatePicker = flatpickr("#end_date", {
            dateFormat: "Y-m-d",
            altInput: true,
            altFormat: "d-m-Y",
            altInputClass: "form-control flatpickr-alt",
            minDate: "today"
        });

        // Upload Portfolio
        $("#artist_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_artist_form').validate({
            ignore: [],
            rules: {
                artistname: {
                    required: true,
                    minlength: minInput,
                    maxlength: maxInput
                },
                Professional_title: {
                    required: true,
                    minlength: minInput,
                    maxlength: maxInput
                },
                experiance: {
                    required: true,
                },
                phone: {
                    required: true,
                    minlength: minInput,
                    maxlength: maxInput,
                    phoneValidation: true,
                },
                email: {
                    required: true,
                    email: true,
                    customEmailValidation: true,
                    minlength: minInput,
                    maxlength: maxInput,
                    remote: {
                        url: "{{ route('admin.check.email') }}", // The URL to the backend endpoint
                        type: "POST",
                        data: {
                            email: function() {
                                return $("#email").val(); // Send the email field value
                            }
                        },
                        dataType: "json",
                        dataFilter: function(data) {
                            var jsonResponse = JSON.parse(data);
                            return jsonResponse.exists ? false : true;
                        }
                    }
                },
                currency_code: {
                    required: true,
                },
                'days[]': {
                    require_from_group: [1, ".day-checkbox"]
                },
                artist_img: {
                    extension: "jpg|jpeg|png|gif",
                    fileSize: 5 // 5MB
                },
                expertiseInput: {
                    required: true
                },
                'artist_portfolio[]': {
                    maxFiles: 20,
                    checkValidFileUpload: true
                },
                main_start_hours: {
                    required: true
                },
                main_end_hours: {
                    required: true,
                    timeCompare: {
                        startTimeSelector: "#main_start_hours"
                    }
                },
                payment_type: {
                    required: function() {
                        return $('input[name="artist_type"]:checked').val() !== undefined;
                    }
                },
                commision_percentage: {
                    required: function() {
                        const artistType = $('input[name="artist_type"]:checked').val();
                        const paymentType = $('#payment_type').val();
                        return artistType !== undefined && artistType && (paymentType === '0' || paymentType === '1');
                    },
                    number: true,
                    min: 0,
                    max: 100
                },
                artist_type: {
                    required: {
                        depends: function() {
                            return $('#shop_id').val() !== '';
                        }
                    }
                },
                start_date: {
                    required: {
                        depends: function() {
                            return $('input[name="artist_type"]:checked').val() === 'guest';
                        }
                    },
                    dateISO: true
                },
                end_date: {
                    required: {
                        depends: function() {
                            return $('input[name="artist_type"]:checked').val() === 'guest';
                        }
                    },
                    dateISO: true,
                    endDateAfterStartDate: true, // Custom rule
                },
            },
            errorPlacement: function(error, element) {
                if (element.attr("name") === "artist_img") {
                    $(".shop_img_error_msg").html(error);
                } else if (element.attr("name") === "artistname") {
                    $(".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") === "artist_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") === "artist_type") {
                    $(".artist_type_error").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 if (element.attr("name") === "end_date") {
                    $(".end_date_error_msg").html(error);
                } else if (element.attr("name") === "start_date") {
                    $(".start_date_error_msg").html(error);
                } else {
                    error.insertAfter(element); // Default behavior for other fields 
                }
            },
            messages: {
                email: {
                    remote: "This Email already exists."
                },
            },
            submitHandler: function(form, event) {
                event.preventDefault();

                var shop_id = $("#shop_id").val();

                if (shop_id == '') {
                    $('.add_artist_btn').attr('disabled', true);
                    $('.add_artist_btn').addClass('loader-active');
                    form.submit(); // Submit the form when valid
                }
                // Check shop availability 
                $.ajax({
                    type: "POST",
                    url: "{{ route('admin.getShopAvailabilityTimings') }}",
                    data: $("form").serialize(),
                    dataType: "json",
                    success: function(response) {
                        if (response.is_error == true) {
                            var weekdays = response.weekdays
                            $('.day-checkbox').each(function() {
                                var dayIndex = $(this).val();
                                if (weekdays[dayIndex] && weekdays[dayIndex].trim() !== "") {
                                    $(this).parents('.master-day-card').find('.day-timing-error').text(response.weekdays[dayIndex]);
                                } else {
                                    $(this).parents('.master-day-card').find('.day-timing-error').text("");
                                }
                            });
                        } else {
                            $('.day-timing-error').text("");

                            $('.add_artist_btn').attr('disabled', true);
                            $('.add_artist_btn').addClass('loader-active');
                            form.submit(); // Submit the form when valid
                        }
                    }
                });

            }
        });

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

        $('#add_artist_form').submit(function(e) {
            e.preventDefault();
            return false;
        });

        // Add time to all checked days
        $('.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').hide();
                    $('#day_' + i + '_edit_button').removeClass('d-none');
                }
            }
        });

        // 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').hide();
                $('#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').show();
                $('#day_' + dayIndex + '_edit_button').addClass('d-none');
            }
        });

        // 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').hide();
                $('#day_' + dayIndex + '_edit_button').removeClass('d-none');

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

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

        $('#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
                }
            },
            submitHandler: function(form) {
                form.submit();
            }
        });

        $('#shop_id').on('change', function() {
            const shopSelected = $(this).val() !== "";

            if (shopSelected) {
                $.ajax({
                    type: "POST",
                    url: "{{ route('admin.getShopAvailability') }}",
                    data: {
                        shop_id: $(this).val()
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.status == true) {
                            $('.day-checkbox').each(function() {
                                if (response.shop_availabilities.includes($(this).val())) {
                                    $(this).prop('checked', true);
                                    $(this).removeAttr('disabled');
                                } else {
                                    $(this).prop('checked', false);
                                    $(this).attr("disabled", "disabled");
                                    $(this).trigger('change');
                                }
                            });
                        }
                        $('#shopTypeSection').show();
                        $('#guestAvailabilitySection').show();
                    }
                });
            } else {
                // Hide artist type section and guest availability
                $('#shopTypeSection').hide();
                $('#guestAvailabilitySection').hide();

                // Uncheck artist type radios
                $('input[name="artist_type"]').prop('checked', false);
            }
        });

        // When payment type is selected
        $('#payment_type').on('change', function() {
            const paymentType = $(this).val();

            if (paymentType === '0' || paymentType === '1') {
                $('.commission_div').show();
            } else {
                $('.commission_div').hide();
            }
        });

        // Trigger change on page load if there's old selected value
        $('#payment_type').trigger('change');

        // On artist type change
        $('input[name="artist_type"]').on('change', function() {
            const selectedType = $(this).val();
            const shopSelected = $('#shop_id').val() !== "";

            if (selectedType === 'guest' && shopSelected) {
                $(".start-end-section").removeClass('d-none');
            } else {
                $(".start-end-section").addClass('d-none');                
            }

            // Trigger validation
            $('#shop_id').valid();
            $('#main_start_hours').valid();
            $('#main_end_hours').valid();
        });

        $('#artist_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]);
        });

        $('#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'
                }).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);
        });
    });

    // Add link to append div
    $(document).on('click', '.add_link', function() {
        const newRow = `
        <div class="d-flex gap-4 mt-4 align-items-center social-link-row">
            <div class="input-file-main">
                <div class="auth-input-position">
                    <input type="text" class="form-control" 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" style="cursor: 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>`;
        $('#socialLinksContainer').append(newRow);
    });

    $(document).on('click', '.remove_link', function() {
        $(this).closest('.social-link-row').remove();
    });
</script>

@endsection