@extends('layouts.admin')
@section('content')
<style>
    .is-invalid {
        border-color: #dc3545;
    }
    .error-message {
        margin-top: 2px;
        font-size: 15px;
        color: #dc3545;
    }
    .day-row {
        margin-bottom: 15px;
    }
    .new_in_business {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .new_in_business label.form-label {
        margin: 0;
    }
    .time-inputs {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .table-abcent-list table {
        width: 100%;
        border-collapse: collapse;
    }
    .table-abcent-list tr {
        border-bottom: 1px solid #eee;
    }
    .table-abcent-list td {
        padding: 10px;
        vertical-align: middle;
    }
    .abcent-name {
        font-weight: bold;
        width: 30%;
    }
    .abcent-date {
        width: 25%;
    }
    .abcent-total {
        width: 25%;
    }
    .delete-last {
        width: 20%;
        text-align: right;
    }
    .delete-ico, .edit-ico {
        color: #dc3545;
        cursor: pointer;
        display: inline-block;
        padding: 5px;
    }
    .edit-ico {
        color: #0d6efd;
    }
    .delete-ico:hover {
        color: #c82333;
    }
    .edit-ico:hover {
        color: #0b5ed7;
    }
    .add-holiday-modal .modal-content {
        border-radius: 10px;
    }
    .add-holiday-modal .modal-header {
        border-bottom: 1px solid #dee2e6;
        padding: 1rem;
    }
    .add-holiday-modal .modal-body {
        padding: 1.5rem;
    }
    .password-toggle {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }
    .password-input-container {
        position: relative;
    }
    .profile-pic {
        position: relative;
        width: 150px;
        height: 150px;
        margin: 0 auto 20px;
    }
    .profile-pic .-label {
        cursor: pointer;
        position: absolute;
        bottom: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        background: #0d6efd;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
    }
    .profile-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        border: 3px solid #f1f1f1;
    }
    .comn-input-select {
        margin-bottom: 15px;
    }
    .cu-btn-center{
        height: 100%;
    vertical-align: middle;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    }
    .cu-btn-center button{
        margin-top: 15px;
    }
</style>

<div class="col-9 main-dash-left">
    <div class="upper-main-user-navigation">
        <div class="user-manage">
            <a href="{{ route('admin.spo.index') }}">SPO Management</a>
            <a class="active">Edit SPO</a>
        </div>
    </div>
    
    <div class="add-user-form sora-font SPO-mang sora-font">
        <form class="validation row g-3" id="editForm" method="POST" action="{{ route('admin.spo.update', $vendor) }}" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            
            <div class="col-md-12">
                <h4 class="mb-3">Basic Information</h4>
            </div>
            
            <div class="col-md-12">
                <div class="profile-pic">
                    <label class="-label" for="file">
                        <span class="glyphicon glyphicon-camera"><i class="fas fa-camera"></i></span>
                    </label>
                    <input name="profile_image" type="file" id="file" accept="image/*" class="form-control" onchange="previewImage(event)">
                    <figure class="profile-img">
                        <img id="preview" src="{{ $vendor->profile_image ? asset('storage/' . $vendor->profile_image) : '' }}" alt="">
                    </figure>
                    <div id="profile_image_error" class="error-message"></div>
                </div>
            </div>
            
            <div class="col-md-1">
                <div class="comn-input-select">
                    <label for="title" class="form-label">Title*</label>
                    <select id="title" class="form-select required" name="title">
                        <option value="mr" {{ $vendor->title == 'mr' ? 'selected' : '' }}>Mr.</option>
                        <option value="mrs" {{ $vendor->title == 'mrs' ? 'selected' : '' }}>Mrs.</option>
                        <option value="ms" {{ $vendor->title == 'ms' ? 'selected' : '' }}>Ms.</option>
                    </select>
                </div>
            </div>
            
            <div class="col-md-5">
                <div class="comn-input-select">
                    <label for="first_name" class="form-label">First Name*</label>
                    <input type="text" class="form-control required" placeholder="First Name" id="first_name" name="first_name" value="{{ old('first_name', $vendor->first_name) }}">
                    <div id="first_name_error" class="error-message"></div>
                    @error('first_name')
                        <div class="backend-error-message">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="comn-input-select">
                    <label for="last_name" class="form-label">Last Name*</label>
                    <input type="text" class="form-control required" placeholder="Last Name" id="last_name" name="last_name" value="{{ old('last_name', $vendor->last_name) }}">
                    <div id="last_name_error" class="error-message"></div>
                    @error('last_name')
                        <div class="backend-error-message">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            
            <div class="col-md-6 password-input-container">
                <div class="comn-input-select">
                    <label for="password" class="form-label">Password</label>
                    <input type="password" class="form-control" id="password" name="password"  autocomplete="new-password">
                    <i class="fas fa-eye password-toggle" onclick="togglePassword('password')"></i>
                    <div id="password_error" class="error-message"></div>
                    @error('password')
                        <div class="backend-error-message">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            
            <div class="col-md-6 password-input-container">
                <div class="comn-input-select">
                    <label for="password_confirmation" class="form-label">Confirm Password</label>
                    <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" autocomplete="new-password">
                    <i class="fas fa-eye password-toggle" onclick="togglePassword('password_confirmation')"></i>
                    <div id="password_confirmation_error" class="error-message"></div>
                </div>
            </div>
            <medium class="text-muted">For security reasons, the current password is not displayed here. You can set a new password at any time by entering it in this fields and saving your changes by clicking the "Update Profile" button in the lower part of this page.</medium>
            
            <div class="col-md-12 mt-4">
                <h4 class="mb-3">Address and Contact Details</h4>
            </div>
            
            <div class="col-md-6">
                <div class="comn-input-select">
                    <label for="street" class="form-label">Street, House Number*</label>
                    <input type="text" class="form-control required" id="street" name="street" value="{{ old('street', $vendor->street) }}">
                    <div id="street_error" class="error-message"></div>
                    @error('street')
                        <div class="backend-error-message">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="comn-input-select">
                    <label for="zip_code" class="form-label">Zip Code*</label>
                    <input type="text" class="form-control required" id="zip_code" name="zip_code" value="{{ old('zip_code', $vendor->zip_code) }}">
                    <div id="zip_code_error" class="error-message"></div>
                    @error('zip_code')
                        <div class="backend-error-message">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="comn-input-select">
                    <label for="city" class="form-label">City*</label>
                    <input type="text" class="form-control required" id="city" name="city" value="{{ old('city', $vendor->city) }}">
                    <div id="city_error" class="error-message"></div>
                    @error('city')
                        <div class="backend-error-message">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="comn-input-select">
                    <label for="country" class="form-label">Country*</label>
                   <select id="country" class="form-select required" name="country">
                        <option value="">{{ __('messages.choose_country') }}</option>

                        @foreach(__('messages.countries') as $key => $label)
                            <option value="{{ $label }}" {{ ($vendor->country ?? '') === $label ? 'selected' : '' }}>
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                    @error('country')
                        <div class="backend-error-message">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="comn-input-select">
                    <label for="email" class="form-label">Email Address*</label>
                    <input type="email" class="form-control required" id="email" name="email" value="{{ old('email', $vendor->email) }}">
                    <div id="email_error" class="error-message"></div>
                    @error('email')
                        <div class="backend-error-message">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="comn-input-select">
                    <label for="phone" class="form-label">Phone Number*</label>
                    <div class="numer-input d-flex">
                        <select name="country_code" class="form-select country_code_custom required" id="country_code">
                            <option value="+49" data-image="https://flagcdn.com/16x12/de.png" {{ $vendor->country_code == '+49' ? 'selected' : '' }}>+49</option>
                            <option value="+43" data-image="https://flagcdn.com/16x12/at.png" {{ $vendor->country_code == '+43' ? 'selected' : '' }}>+43</option>
                            <option value="+41" data-image="https://flagcdn.com/16x12/ch.png" {{ $vendor->country_code == '+41' ? 'selected' : '' }}>+41</option>
                        </select>
                        <input type="text" class="form-control required" id="phone" name="number" placeholder="Phone number" value="{{ old('number', $vendor->number) }}">
                    </div>
                    <div id="phone_error" class="error-message"></div>
                    @error('number')
                        <div class="backend-error-message">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            
            <div class="col-md-12 mt-4">
                <h4 class="mb-3">Business Information</h4>
            </div>
            
            <div class="col-md-12">
                <div class="comn-input-select new_in_business" >
                    <input class="form-check-input" 
                           type="checkbox" 
                           name="new_in_business" 
                           id="new_in_business"
                           value="1"
                           {{ old('new_in_business', $vendor->new_in_business) ? 'checked' : '' }}>
                    <label for="new_in_business" class="form-label">Are you new in business</label>
                </div>
            </div>
            <div class="col-md-6">
                <div class="comn-input-select">
                    <label for="business_type" class="form-label">Business Type*</label>
                   <select id="business_type" class="form-select required" name="business_type">
                        <option value="">Select</option>
                        <option value="Own Location" {{ $vendor->business_type == 'Own Location' ? 'selected' : '' }}>{{ __('messages.business_own_location') }}</option>
                        <option value="Franchiser" {{ $vendor->business_type == 'Franchiser' ? 'selected' : '' }}>{{ __('messages.business_franchiser') }}</option>
                        <option value="Partner" {{ $vendor->business_type == 'Partner' ? 'selected' : '' }}>{{ __('messages.business_partner') }}</option>
                    </select>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="comn-input-select">
                    <label for="business_model" class="form-label">Business Model*</label>
                   <select id="business_model" class="form-select required" name="business_model">
                        <option value="">Select</option>
                        <option value="Fulltimer" {{ $vendor->business_model == 'Fulltimer' ? 'selected' : '' }}>{{ __('messages.fulltimer') }}</option>
                        <option value="Side Business" {{ $vendor->business_model == 'Side Business' ? 'selected' : '' }}>{{ __('messages.side_business') }}</option>
                    </select>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="comn-input-select">
                    <label for="contact_person" class="form-label">Name of the Contract Type*</label>
                    <select id="contact_person" class="form-select required" name="contact_person">
                        <option value="">Select</option>
                        <option value="Franchiser" {{ $vendor->contact_person == 'Franchiser' ? 'selected' : '' }}>{{ __('messages.contact_franchiser') }}</option>
                        <option value="Partner" {{ $vendor->contact_person == 'Partner' ? 'selected' : '' }}>{{ __('messages.contact_partner') }}</option>
                        <option value="Test Location" {{ $vendor->contact_person == 'Test Location' ? 'selected' : '' }}>{{ __('messages.contact_test_location') }}</option>
                    </select>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="comn-input-select">
                    <label for="size_of_location" class="form-label">Size of Location*</label>
                   <select id="size_of_location" class="form-select required" name="size_of_location">
                        <option value="">Select</option>
                        <option value="Beginner" {{ $vendor->size_of_location == 'Beginner' ? 'selected' : '' }}>{{ __('messages.beginner') }}</option>
                        <option value="Small (< 5)" {{ $vendor->size_of_location == 'Small (< 5)' ? 'selected' : '' }}>{{ __('messages.small_business') }}</option></option>
                        <option value="Middle (6 - 15)" {{ $vendor->size_of_location == 'Middle (6 - 15)' ? 'selected' : '' }}>{{ __('messages.middle_business') }}</option>
                        <option value="Large (16-35)" {{ $vendor->size_of_location == 'Large (16-35)' ? 'selected' : '' }}>{{ __('messages.large_business') }}</option></option>
                        <option value="XXL (>30)" {{ $vendor->size_of_location == 'XXL (>30)' ? 'selected' : '' }}>{{ __('messages.xxl_business') }}</option>
                    </select>
                </div>
            </div>
            
            <div class="col-md-12 mt-4">
                <h4 class="mb-3">Tax & Banking Information</h4>
            </div>
            
            <div class="col-md-6">
                <div class="comn-input-select">
                    <label for="tax_number" class="form-label">Tax Number*</label>
                    <input type="text" class="form-control required" id="tax_number" name="tax_number"    
                    placeholder="Tax Number"  value="{{ old('tax_number', $vendor->tax_number) }}">
                    <div id="tax_number_error" class="error-message"></div>
                    @error('tax_number')
                        <div class="backend-error-message">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="comn-input-select">
                    <label for="tax_id" class="form-label">Tax ID (UMSt.-ID)*</label>
                    <input type="text" class="form-control required" id="tax_id" name="tax_id"   
                    placeholder="Tax ID / VAT ID" value="{{ old('tax_id', $vendor->tax_id) }}">
                    <div id="tax_id_error" class="error-message"></div>
                    @error('tax_id')
                        <div class="backend-error-message">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="comn-input-select">
                    <label for="bank_name" class="form-label">Bank Name*</label>
                    <input type="text" class="form-control required" id="bank_name" name="bank_name" value="{{ old('bank_name', $vendor->bank_name) }}">
                    <div id="bank_name_error" class="error-message"></div>
                    @error('bank_name')
                        <div class="backend-error-message">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="comn-input-select">
                    <label for="account_owner" class="form-label">Bank Account Owner*</label>
                    <input type="text" class="form-control required" id="account_owner" name="account_owner" value="{{ old('account_owner', $vendor->account_owner) }}">
                    <div id="account_owner_error" class="error-message"></div>
                    @error('account_owner')
                        <div class="backend-error-message">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            
            
            
            <div class="col-md-6">
                <div class="comn-input-select">
                    <label for="account_number" class="form-label">Bank Account Number*</label>
                    <input type="text" class="form-control required" id="account_number" name="account_number" value="{{ old('account_number', $vendor->account_number) }}">
                    <div id="account_number_error" class="error-message"></div>
                    @error('account_number')
                        <div class="backend-error-message">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="comn-input-select">
                    <label for="bic_number" class="form-label">BIC Number*</label>
                    <input type="text" class="form-control required" id="bic_number" name="bic_number" value="{{ old('bic_number', $vendor->bic_number) }}">
                    <div id="bic_number_error" class="error-message"></div>
                    @error('bic_number')
                        <div class="backend-error-message">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="comn-input-select">
                    <label for="iban_number" class="form-label">IBAN Number*</label>
                    <input type="text" class="form-control required" id="iban_number"  
                    placeholder="IBAN Number"  name="iban_number" value="{{ old('iban_number', $vendor->iban_number) }}">
                    <div id="iban_number_error" class="error-message"></div>
                    @error('iban_number')
                        <div class="backend-error-message">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            
            <div class="col-md-12 mt-3 detail-section">
                <h2 class="mb-5">Existing Commission Rates</h2   >
                <table class="table table-bordered" id="existingCommissionTable">
                    <thead>
                        <tr>
                            <th>From Amount</th>
                            <th>To Amount</th>
                            <th>Commission %</th>
                            <th>Shop Fee </th>
                        </tr>
                    </thead>
                    <tbody>
                        @if(!empty($vendor->commission_rate) && is_array($vendor->commission_rate))
                            @foreach($vendor->commission_rate as $range => $data)
                            @php
                                $parts = explode('-', $range);
                                $from = $parts[0];
                                $to = $parts[1] ?? 'Above';
                                $commission = $data['commission'] ?? '';
                                $shop_fee = $data['shop_fee'] ?? '';
                            @endphp
                               <tr>
                                <td>{{ number_format($from, 2, ',', '.') }}€</td>
                                <td>{{ number_format($to, 2, ',', '.') }}€</td>
                                <td>{{ $commission }}%</td>
                                <td>{{ number_format($shop_fee, 2, ',', '.') }}€</td>
                            </tr>
                            @endforeach
                        @endif
                    </tbody>
                </table>
            </div>
            

                <div class="col-md-6" style="margin-bottom: 10px">
                    <div class="mb-3 cu-btn-center">
                        <button type="button" class="add-user add-icon" data-bs-toggle="modal" data-bs-target="#commissionModal">
                            <i class="fa-solid fa-plus"></i> Add Commission Rates
                        </button>
                    </div>
                </div>
            <p style="font-size: 14px; margin-bottom: 50px">Attention: Please insert amounts and fees always with "." sign instead of the ","sign. </p>
            <div class="col-md-12 mt-4">
                <h4 class="mb-3">Working Hours</h4>
            </div>
            
            @php
                $days = ['mo' => 'Monday', 'di' => 'Tuesday', 'mi' => 'Wednesday', 
                         'do' => 'Thursday', 'fr' => 'Friday', 'sa' => 'Saturday', 'so' => 'Sunday'];
            @endphp
            
            @foreach($days as $short => $full)
            <div class="col-md-12 day-row">
                <div class="d-flex align-items-center gap-3">
                    <div class="form-check">
                        <label class="form-check-label" for="closed_{{ $short }}">
                            {{ $full }}
                        </label>
                    </div>
                    
                    @php
                        $workingHour = $vendor->workingHours->where('day', $short)->first();
                        $isClosed = $workingHour ? $workingHour->is_closed : false;
                        $openTime = ($workingHour && $workingHour->open_time && !$isClosed) ? \Carbon\Carbon::parse($workingHour->open_time)->format('H:i') : '';
                        $closeTime = ($workingHour && $workingHour->close_time && !$isClosed) ? \Carbon\Carbon::parse($workingHour->close_time)->format('H:i') : '';
                    @endphp
                    
                    <div class="time-inputs">
                        <input type="time" class="form-control {{ $short }}_from" name="{{ $short }}_from" 
                            value="{{ $openTime }}"
                            {{ $isClosed ? 'disabled' : '' }}>
                        <span>to</span>
                        <input type="time" class="form-control {{ $short }}_to" name="{{ $short }}_to" 
                            value="{{ $closeTime }}"
                            {{ $isClosed ? 'disabled' : '' }}>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input day-closed" type="checkbox" name="days_closed[]" 
                            value="{{ $short }}" id="closed_{{ $short }}" {{ $isClosed ? 'checked' : '' }}>
                        <label class="form-check-label" for="closed_{{ $short }}">
                            Closed
                        </label>
                    </div>
                </div>
            </div>
            @endforeach
            
            <div class="col-md-12 mt-4">
                <h4 class="mb-3">Holidays/Absent Days</h4>
                
                <div class="abcent-days">
                    <div class="head-abcent-days">
                        <button class="add-notification-btn" type="button" data-bs-toggle="modal"
                            data-bs-target="#holidayModal">Add Holiday</button>
                    </div>
                    
                    <div class="table-abcent-list">
                        <table id="holidaysTable">
                            @if($vendor->holidays->count() > 0)
                                @foreach($vendor->holidays as $holiday)
                                <tr data-id="{{ $holiday->id }}">
                                    <td class="abcent-name">{{ $holiday->name }}</td>
                                    <td class="abcent-date" data-date="{{ \Carbon\Carbon::parse($holiday->date)->format('Y-m-d') }}">
                                        {{ \Carbon\Carbon::parse($holiday->date)->format('d.m.Y') }}
                                    </td>
                                    <td class="abcent-total">
                                        @php
                                            $today = \Carbon\Carbon::today();
                                            $daysLeft = $today->diffInDays($holiday->date, false);
                                        @endphp
                                        @if($daysLeft > 0)
                                            in {{ $daysLeft }} days
                                        @elseif($daysLeft === 0)
                                            Today
                                        @else
                                            {{ abs($daysLeft) }} days ago
                                        @endif
                                    </td>
                                    <td class="delete-last">
                                        <div class="edit-ico" data-id="{{ $holiday->id }}">
                                            <i class="fas fa-edit" data-id="{{ $holiday->id }}"></i>
                                        </div>
                                        <div class="delete-ico" data-id="{{ $holiday->id }}">
                                            <i class="fa-solid fa-trash" data-id="{{ $holiday->id }}"></i>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            @else
                                <tr id="noHolidaysRow">
                                    <td colspan="4" class="text-center">No Holidays Available</td>
                                </tr>
                            @endif
                        </table>
                    </div>
                </div>
            </div>
            
            <div class="col-12 mt-4">
                <div class="upper-main-btn-last-comn d-flex">
                    <button type="submit" class="add-user">Update SPO</button>
                    <button type="button" class="cancel-btn" onclick="window.history.back()">Cancel</button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- Commission Rates Modal -->
<div class="modal add-commission-modal fade" id="commissionModal" tabindex="-1" aria-labelledby="commissionModalLabel"
    aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-lg modal-dialog-centered"> <!-- larger modal for table -->
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title" id="commissionModalLabel">Add Commission Rates</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="commissionForm">
                    @csrf
                    <input type="hidden" id="vendor_id" name="vendor_id" value="{{$vendor->id}}">
                    
                    <table class="table table-bordered" id="commissionTable">
                        <thead>
                            <tr>
                                <th>From Amount</th>
                                <th>To Amount</th>
                                <th>Commission %</th>
                                <th>Shop Fees </th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $commissionRates = $vendor->commission_rate ?? [];
                            @endphp
                        
                            @if(!empty($commissionRates))
                                @foreach($commissionRates as $range => $data)
                                    @php
                                        $parts = explode('-', $range);
                                        $from = $parts[0];
                                        $to = $parts[1] ?? '';
                                        $commission = $data['commission'] ?? '';
                                        $shop_fee = $data['shop_fee'] ?? '';
                                    @endphp
                                    <tr>
                                        <td><input type="number" name="from_amount[]" class="form-control" value="{{ $from }}"></td>
                                        <td><input type="number" name="to_amount[]" class="form-control" value="{{ $to }}"></td>
                                        <td><input type="number" name="commission_percent[]" class="form-control" value="{{ $commission }}"></td>
                                        <td><input type="number" name="shop_fee[]" class="form-control" value="{{ $shop_fee }}"></td>
                                        <td class="action-btn">
                                            <div class="action-btn-wrap d-flex gap-2">
                                                <button type="button" class="add-user add-row">+</button>
                                                <button type="button" class="cancel-btn remove-row">-</button>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td><input type="number" name="from_amount[]" class="form-control" placeholder="5000"></td>
                                    <td><input type="number" name="to_amount[]" class="form-control" placeholder="10000"></td>
                                    <td><input type="number" name="commission_percent[]" class="form-control" placeholder="10"></td>
                                    <td><input type="number" name="shop_fee[]" class="form-control" placeholder="19.99"></td>
                                    <td class="action-btn">
                                        <div class="action-btn-wrap d-flex gap-2">
                                            <button type="button" class="add-user add-row">+</button>
                                            <button type="button" class="cancel-btn remove-row">-</button>
                                        </div>
                                    </td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                    

                    <div class="d-flex justify-content-end">
                        <button type="button" class="cancel-btn me-2" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="add-user" id="saveCommission">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Holiday Modal -->
<div class="modal add-holiday-modal fade" id="holidayModal" tabindex="-1" aria-labelledby="holidayModalLabel"
    aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title" id="holidayModalLabel">Add Holiday</h1>
            </div>
            <div class="modal-body">
                <form id="holidayForm">
                    @csrf
                    <input type="hidden" id="edit_holiday_id" value="">
                    <div class="mb-3 comn-input-select">
                        <label for="holiday_name" class="col-form-label">Holiday Name*</label>
                        <input type="text" class="form-control" id="holiday_name" name="holiday_name">
                        <div id="holiday_name_error" class="error-message"></div>
                    </div>
                    <div class="mb-3 comn-input-select">
                        <label for="holiday_date" class="col-form-label">Date*</label>
                        <input class="form-control" id="holiday_date" type="date" name="holiday_date">
                        <div id="holiday_date_error" class="error-message"></div>
                    </div>
                   
                    <div class="upper-main-btn-last-comn d-flex">
                        <button type="button" class="cancel-btn" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class=" add-user" id="saveHoliday">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@php
    use Carbon\Carbon;
@endphp
{{-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> --}}

<script>
    console.log('Script loaded successfully');
    const baseUrl = "{{ rtrim(config('app.url'), '/') }}";

// Test jQuery
$(document).ready(function() {
    console.log('jQuery is working');
    
    // Test form selection
    $(document).on('click', '.add-row', function() {
        var row = $(this).closest('tr').clone();
        row.find('input').val(''); // clear inputs
        $('#commissionTable tbody').append(row);
    });

    $(document).on('click', '.remove-row', function() {
        var tbody = $(this).closest('tbody');
        if(tbody.find('tr').length > 1) { // prevent removing last row
            $(this).closest('tr').remove();
        }
    });

    $('#saveCommission').on('click', function(e) {
        e.preventDefault();
        var formData = $('#commissionForm').serialize();
        var vendor_id = $('#vendor_id').val();

        $.ajax({
            url: baseUrl + '/admin/vendors/' + vendor_id + '/save-commission',
            type: 'POST',
            data: formData,
            success: function(response) {
                if(response.success) {
                    $('#commissionModal').modal('hide');

                    var tableBody = '';
                    $.each(response.data, function(range, obj) {
                        var parts = range.split('-');
                        var from = parts[0];
                        var to = parts[1] || 'Above';
                        var commission = obj.commission;
                        var shop_fee = obj.shop_fee;
                        tableBody += `<tr>
                            <td>${from}</td>
                            <td>${to}</td>
                            <td>${commission}%</td>
                            <td>${shop_fee}</td>
                        </tr>`;
                    });

                    $('#existingCommissionTable tbody').html(tableBody);

                    Swal.fire({
                        title: 'Success!',
                        text: 'Commission rates saved successfully!',
                        icon: 'success',
                        confirmButtonText: 'OK',
                        confirmButtonColor: '#5bc0de'
                    });
                } else {
                    Swal.fire({
                        title: 'Error!',
                        text: 'Something went wrong!',
                        icon: 'error',
                        confirmButtonText: 'OK',
                        confirmButtonColor: '#5bc0de'
                    });
                }
            },
            error: function(xhr) {
                console.log(xhr.responseText);
                Swal.fire({
                        title: 'Error!',
                        text: 'Something went wrong!',
                        icon: 'error',
                        confirmButtonText: 'OK',
                        confirmButtonColor: '#5bc0de'
                    });
            }
        });
    });

   
   
});



    // const IBAN_PATTERNS = {
    //     "Germany": /^DE\d{20}$/,
    //     "Austria": /^AT\d{18}$/,
    //     "Switzerland": /^CH\d{19}$/
    // };

    // // Tax Number Patterns
    // const TAX_NUMBER_PATTERNS = {
    //     "Germany": /^[\d\/]{10,11}$/,
    //     "Austria": /^\d{8,10}$/,
    //     "Switzerland": /^[\d\/\.]{7,12}$/
    // };

    // // VAT Number Patterns
    // const VAT_NUMBER_PATTERNS = {
    //     "Austria": /^ATU\d{8}$/,
    //     "Switzerland": /^CHE-\d{3}\.\d{3}\.\d{3}( MWST)?$/
    // };

    // // Tax ID Pattern (Germany only)
    // const TAX_ID_PATTERN = /^[A-Za-z0-9]{11}$/;



    function formatFlag(option) {
        if (!option.id) return option.text;
        const imageUrl = $(option.element).data('image');
        const text = option.text;
        if (imageUrl) {
            return $(`<span><img src="${imageUrl}" style="width:16px; height:auto; margin-right:8px;"> ${text}</span>`);
        }
        return text;
    }

    $(document).ready(function () {
        $('#country_code').select2({
            templateResult: formatFlag,
            templateSelection: formatFlag,
            minimumResultsForSearch: -1 
        });

        // Initialize holidays array with existing holidays
        let holidays = {!! json_encode($vendor->holidays->map(function($item) {
            return [
                'id' => $item->id,
                'name' => $item->name,
                'date' => \Carbon\Carbon::parse($item->date)->format('Y-m-d'),
                'new' => 0
            ];
        })) !!};

        var form = $('#editForm');
        console.log('Form element:', form);
        console.log('Form length:', form.length);

        form.on('submit', function(e) {
            e.preventDefault();
            let isValid = true;
            console.log(isValid)
            $('.is-invalid').removeClass('is-invalid');
            $('.error-message').text('');
            $('.required').each(function() {
                const fieldId = $(this).attr('id');
                const errorElement = $(`#${fieldId}_error`);
                
                if ($(this).val().trim() === '') {
                    $(this).addClass('is-invalid');
                    errorElement.text(`Please enter ${$(this).attr('placeholder') || fieldId.replace('_', ' ')}`);
                    isValid = false;
                }
            });

            if ($('#password').val() && $('#password').val() !== $('#password_confirmation').val()) {
                $('#password_confirmation').addClass('is-invalid');
                $('#password_confirmation_error').text('Passwords do not match');
                isValid = false;
            }

            if ($('#password').val() && $('#password').val().length < 8) {
                $('#password').addClass('is-invalid');
                $('#password_error').text('Password must be at least 8 characters');
                isValid = false;
            }

            // const country = $('#country').val();
            // const iban = $('#iban_number').val().replace(/\s+/g, '').toUpperCase();
            // if (iban) {
            //     if (!IBAN_PATTERNS[country].test(iban)) {
            //         $('#iban_number').addClass('is-invalid');
            //         $('#iban_number_error').text(
            //             `${country} IBAN must start with ${country === "Germany" ? "DE" : (country === "Austria" ? "AT" : "CH")} and be ${country === "Germany" ? "22" : (country === "Austria" ? "20" : "21")} characters long`
            //         );
            //         isValid = false;
            //     }
            // }
            // const taxNumber = $('#tax_number').val().replace(/\s+/g, '');
            // if (taxNumber && TAX_NUMBER_PATTERNS[country] && !TAX_NUMBER_PATTERNS[country].test(taxNumber)) {
            //     $('#tax_number').addClass('is-invalid');
            //     $('#tax_number_error').text(
            //         `${country} tax number format is invalid.`
            //     );
            //     isValid = false;
            // }
            // if (country === "Austria" || country === "Switzerland") {
            //     const vatField = $('#tax_id');
            //     const vatValue = vatField.val().replace(/\s+/g, '').toUpperCase();
            //     if (vatValue && !VAT_NUMBER_PATTERNS[country].test(vatValue)) {
            //         vatField.addClass('is-invalid');
            //         $('#tax_id_error').text(
            //             `${country} VAT ID format is invalid (${country === "Austria" ? "Example: ATU12345678" : "Example: CHE-123.456.789 MWST"})`
            //         );
            //         isValid = false;
            //     }
            // }

            // if (country === "Germany") {
            //     const taxIdField = $('#tax_id');
            //     const taxIdValue = taxIdField.val().replace(/\s+/g, '');
            //     if (taxIdValue && !TAX_ID_PATTERN.test(taxIdValue)) {
            //         taxIdField.addClass('is-invalid');
            //         $('#tax_id_error').text('Tax ID must be exactly 11 digits (Germany)');
            //         isValid = false;
            //     }
            // }


            // if ($('#tax_id').val().length !== 11) {
            //     $('#tax_id').addClass('is-invalid');
            //     $('#tax_id_error').text('Tax ID must be exactly 11 characters');
            //     isValid = false;
            // }
            console.log(isValid)
            if (!isValid) {
                $('html, body').animate({
                    scrollTop: $('.is-invalid').first().offset().top - 100
                }, 500);
            } else {
                // Add hidden inputs for holidays
                holidays.forEach((holiday, index) => {
                    $(this).append(
                        `<input type="hidden" name="holidays[${index}][id]" value="${holiday.id}">` +
                        `<input type="hidden" name="holidays[${index}][name]" value="${holiday.name}">` +
                        `<input type="hidden" name="holidays[${index}][date]" value="${holiday.date}">`+
                        `<input type="hidden" name="holidays[${index}][new]" value="${holiday.new}">`
                    );
                });
                this.submit();
            }
        });
    
        
        let editingHolidayId = null;

        $('.day-closed').change(function() {
            const dayPrefix = $(this).val();
            const isClosed = $(this).is(':checked');
            
            $(`.${dayPrefix}_from, .${dayPrefix}_to`).prop('disabled', isClosed);
            
            if (isClosed) {
                $(`.${dayPrefix}_from, .${dayPrefix}_to`).val('');
            }
        });

        $('#holidayModal').on('hidden.bs.modal', function() {
            $('#holidayForm')[0].reset();
            $('#edit_holiday_id').val('');
            editingHolidayId = null;
            clearHolidayErrors();
        });

        $('#saveHoliday').click(function() {
            const holidayName = $('#holiday_name').val();
            const holidayDate = $('#holiday_date').val();
            
            clearHolidayErrors();
            
            if (!holidayName) {
                $('#holiday_name_error').text('Please enter holiday name');
                return;
            }
            
            if (!holidayDate) {
                $('#holiday_date_error').text('Please select holiday date');
                return;
            }

            if (editingHolidayId) {
                const index = holidays.findIndex(h => h.id == editingHolidayId);
                if (index !== -1) {
                    holidays[index] = {
                        id: editingHolidayId,
                        name: holidayName,
                        date: holidayDate,
                        new: 0 // Not new, it's an update
                    };
                }
            } else {
                holidays.push({
                    id: Date.now(), // Generate a temporary ID
                    name: holidayName,
                    date: holidayDate,
                    new: 1 // Mark as new
                });
            }

            updateHolidaysTable();
            $('#holidayModal').modal('hide');
        });

        $(document).ready(function () {
            function validatePasswords() {
                const password = $('#password').val();
                const confirmPassword = $('#password_confirmation').val();

                if (password && confirmPassword && password !== confirmPassword) {
                    $('#password_confirmation').addClass('is-invalid');
                    $('#password_confirmation_error').text('Passwords do not match');
                } else {
                    $('#password_confirmation').removeClass('is-invalid');
                    $('#password_confirmation_error').text('');
                }
            }

            // Run validation on input in both fields
            $('#password, #password_confirmation').on('input', validatePasswords);
        });

        $(document).on('click', '.delete-ico', function() {
            const holidayId = parseInt($(this).data('id'));
            holidays = holidays.filter(h => h.id !== holidayId);
            updateHolidaysTable();
        });
        
        $(document).on('click', '.edit-ico', function() {
            const holidayId = parseInt($(this).data('id'));
            const holiday = holidays.find(h => h.id === holidayId);
            
            if (holiday) {
                editingHolidayId = holidayId;
                $('#edit_holiday_id').val(holidayId);
                $('#holiday_name').val(holiday.name);
                $('#holiday_date').val(holiday.date);
                $('#holidayModalLabel').text('Edit Holiday');
                $('#holidayModal').modal('show');
            }
        });

        function updateHolidaysTable() {
            const table = $('#holidaysTable');
            const noHolidaysRow = $('#noHolidaysRow');
            
            table.find('tr:not(#noHolidaysRow)').remove();
            
            if (holidays.length === 0) {
                if (noHolidaysRow.length === 0) {
                    table.append('<tr id="noHolidaysRow"><td colspan="4" class="text-center">No Holidays Available</td></tr>');
                } else {
                    noHolidaysRow.show();
                }
                return;
            }
            
            noHolidaysRow.hide();

            holidays.sort((a, b) => new Date(a.date) - new Date(b.date));
            
            holidays.forEach(holiday => {
                const today = new Date();
                today.setHours(0, 0, 0, 0);
                
                const holidayDate = new Date(holiday.date + 'T00:00:00');
                holidayDate.setHours(0, 0, 0, 0);
                
                const timeDiff = holidayDate - today;
                const daysLeft = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
                
                const daysLeftText = daysLeft > 0 ? `in ${daysLeft} days` : 
                                daysLeft === 0 ? "Today" : 
                                `${Math.abs(daysLeft)} days ago`;
                
                const formattedDate = holidayDate.toLocaleDateString('de-DE', {
                    day: '2-digit',
                    month: '2-digit',
                    year: 'numeric'
                }).replace(/\//g, '.');
                
                const row = $(`
                    <tr data-id="${holiday.id}">
                        <td class="abcent-name">${holiday.name}</td>
                        <td class="abcent-date" data-date="${holiday.date}">${formattedDate}</td>
                        <td class="abcent-total">${daysLeftText}</td>
                        <td class="delete-last">
                            <div class="edit-ico" data-id="${holiday.id}">
                                <i class="fas fa-edit" data-id="${holiday.id}"></i>
                            </div>
                            <div class="delete-ico" data-id="${holiday.id}">
                                <i class="fa-solid fa-trash" data-id="${holiday.id}"></i>
                            </div>
                        </td>
                    </tr>
                `);
                
                table.append(row);
            });
            
            
        }

        function clearHolidayErrors() {
            $('#holiday_name_error').text('');
            $('#holiday_date_error').text('');
        }

        if (typeof jQuery === 'undefined') {
            console.error('jQuery is not loaded!');
        } else {
            console.log('jQuery version:', jQuery.fn.jquery);
        }


 
        updateHolidaysTable();
    });

    function togglePassword(fieldId) {
        const field = document.getElementById(fieldId);
        const icon = field.nextElementSibling;
        
        if (field.type === 'password') {
            field.type = 'text';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        } else {
            field.type = 'password';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        }
    }

    function previewImage(event) {
        const input = event.target;
        const file = input.files[0];
        const preview = document.getElementById('preview');
        
        if (file) {
            const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/jpg'];
            
            if (!validTypes.includes(file.type)) {
                $('#profile_image_error').text('Please select a valid image file (jpg, jpeg, png, gif, webp)');
                input.value = '';
                preview.src = "{{ $vendor->profile_image ? asset('storage/' . $vendor->profile_image) : asset('admin/images/profile.png') }}";
                return;
            }
            
            $('#profile_image_error').text('');
            const reader = new FileReader();
            reader.onload = function(e) {
                preview.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    }
</script>
@endsection