@extends('layouts.app')

@section('title', 'Add Franchise')

@section('page-wrapper')
    <!-- Page Header with Breadcrumb -->
    <div class="page-header d-print-none">
        <div class="container-fluid">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <!-- Breadcrumb -->
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{ route('dashboard') }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                        viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                        stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <path d="M5 12l-2 0l9 -9l9 9l-2 0" />
                                        <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
                                        <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
                                    </svg>
                                    Dashboard
                                </a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{ route('franchises.index') }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round"
                                        class="icon icon-tabler icons-tabler-outline icon-tabler-git-branch">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <path d="M7 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
                                        <path d="M7 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
                                        <path d="M17 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
                                        <path d="M7 8l0 8" />
                                        <path d="M9 18h6a2 2 0 0 0 2 -2v-5" />
                                        <path d="M14 14l3 -3l3 3" />
                                    </svg>
                                    Franchise
                                </a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Add</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <!-- Page Body -->
    <div class="page-body">
        <div class="container-fluid">
            <div class="row">
                <!-- Card -->
                <div class="col-md-6 col-12">
                    <div class="card">
                        <!-- Card Header -->
                        <div class="card-header">
                            <h3 class="card-title">Add Franchise</h3>
                        </div>
                        <form id="franchiseForm" action="{{ route('franchises.store') }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="card-body">
                                <div class="row">
                                    <div class="mb-3 col-12">
                                        <label for="admin_id" class="form-label required">Admin</label>
                                        <select class="form-select @error('admin_id') is-invalid @enderror" id="admin_id"
                                            name="admin_id" {{ auth()->user()->role_id == 2 ? 'disabled' : '' }}>
                                            <option value="" {{ old('admin_id', '') === '' ? 'selected' : '' }}>
                                            </option>
                                            @foreach ($admins as $id => $name)
                                                <option value="{{ $id }}"
                                                    {{ $selectedAdminId == $id ? 'selected' : '' }}>
                                                    {{ $name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @if (auth()->user()->role_id == 2)
                                            <input type="hidden" name="admin_id"
                                                value="{{ old('admin_id', auth()->user()->admin_id) }}">
                                        @endif
                                        @error('admin_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="mb-3 col-6">
                                        <label for="name" class="form-label required">Franchise Name</label>
                                        <input type="text" placeholder="Enter franchise name"
                                            class="form-control @error('name') is-invalid @enderror" id="name"
                                            name="name" value="{{ old('name') }}">
                                        @error('name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="mb-3 col-6">
                                        <label for="gst_number" class="form-label">GST Number</label>
                                        <input type="text" placeholder="Enter GST number"
                                            class="form-control @error('gst_number') is-invalid @enderror" id="gst_number"
                                            name="gst_number" value="{{ old('gst_number') }}">
                                        @error('gst_number')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="mb-3 col-6">
                                        <label for="contact_person_name" class="form-label required">Contact Person
                                            Name</label>
                                        <input type="text" placeholder="Enter contact person name"
                                            class="form-control @error('contact_person_name') is-invalid @enderror"
                                            id="contact_person_name" name="contact_person_name"
                                            value="{{ old('contact_person_name') }}">
                                        @error('contact_person_name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="mb-3 col-6">
                                        <label for="contact_person_mobile" class="form-label required">Contact Person
                                            Mobile</label>
                                        <input type="number" placeholder="Enter contact person mobile"
                                            class="form-control @error('contact_person_mobile') is-invalid @enderror"
                                            id="contact_person_mobile" name="contact_person_mobile"
                                            value="{{ old('contact_person_mobile') }}" minlength="10" maxlength="10"
                                            pattern="[0-9]{10}"
                                            oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10)">
                                        @error('contact_person_mobile')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-4">
                                        <label for="pincode" class="form-label required">Pincode</label>
                                        <input type="number" class="form-control @error('pincode') is-invalid @enderror"
                                            id="pincode" name="pincode" value="{{ old('pincode') }}" minlength="6"
                                            maxlength="6" pattern="[0-9]{6}" placeholder="Enter pincode"
                                            oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 6)">
                                        @error('pincode')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="mb-3 col-4">
                                        <label for="city" class="form-label required">City</label>
                                        <input type="hidden" name="city_id" id="city_id"
                                            value="{{ old('city_id') }}">
                                        <input type="text" class="form-control @error('city_id') is-invalid @enderror"
                                            id="city" name="city" placeholder="Enter city"
                                            value="{{ old('city') }}" readonly>
                                        @error('city_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="mb-3 col-4">
                                        <label for="state" class="form-label required">State</label>
                                        <input type="hidden" name="state_id" id="state_id"
                                            value="{{ old('state_id') }}">
                                        <input type="text" class="form-control @error('city_id') is-invalid @enderror"
                                            id="state" name="state" placeholder="Enter state"
                                            value="{{ old('state') }}" readonly>
                                        @error('city_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="mb-3 col-12">
                                        <label for="address" class="form-label">Address</label>
                                        <textarea class="form-control" placeholder="Enter address" id="address" name="address" rows="3">{{ old('address') }}</textarea>
                                        @error('address')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="mb-3 col-6" id="aadharcard_image">
                                        <label for="aadharcard_image" class="form-label">Aadhaar Image</label>
                                        <input type="file"
                                            class="form-control @error('aadharcard_image') is-invalid @enderror"
                                            id="aadharcard_image" name="aadharcard_image" accept="image/*">
                                        <small class="form-hint">JPG, JPEG, PNG
                                            allowed.</small>
                                        @error('aadharcard_image')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <div class="">
                                            <img id="aadharcardPreview" src="#" alt="Aadhaar Image Preview"
                                                style="display: none; max-width: 150px; max-height: 150px; border: 1px solid #ddd; padding: 5px; border-radius: 4px;">
                                        </div>
                                    </div>
                                    <div class="mb-3 col-6">
                                        <label for="aadharcard" class="form-label">Aadhaar Number</label>
                                        <input type="number" placeholder="Enter aadhaar number"
                                            class="form-control @error('aadharcard') is-invalid @enderror" id="aadharcard"
                                            name="aadharcard" value="{{ old('aadharcard') }}" minlength="12"
                                            maxlength="12" pattern="[0-9]{10}"
                                            oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 12)">
                                        @error('aadharcard')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="mb-3 col-6" id="pancard_image">
                                        <label for="pancard_image" class="form-label">PAN Image</label>
                                        <input type="file"
                                            class="form-control @error('pancard_image') is-invalid @enderror"
                                            id="pancard_image" name="pancard_image" accept="image/*">
                                        <small class="form-hint">JPG, JPEG, PNG
                                            allowed.</small>
                                        @error('pancard_image')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <div class="">
                                            <img id="pancardPreview" src="#" alt="PAN Image Preview"
                                                style="display: none; max-width: 150px; max-height: 150px; border: 1px solid #ddd; padding: 5px; border-radius: 4px;">
                                        </div>
                                    </div>
                                    <div class="mb-3 col-6">
                                        <label for="pancard" class="form-label">PAN Number</label>
                                        <input type="text" placeholder="Enter pan number"
                                            class="form-control @error('pancard') is-invalid @enderror" id="pancard"
                                            name="pancard" value="{{ old('pancard') }}" minlength="10" maxlength="10">
                                        @error('pancard')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                @if (auth()->user()->role_id != 2)
                                    <div class="row">
                                        <div class="mb-3 col-12">
                                            <label for="assign_couriers" class="form-label required">Courier
                                                Accounts</label>
                                            <select class="form-select @error('assign_couriers') is-invalid @enderror"
                                                id="assign_couriers" name="assign_couriers[]" value="" multiple>
                                                @foreach ($couriers as $id => $name)
                                                    <option value="{{ $id }}"
                                                        {{ collect(old('assign_couriers'))->contains($id) ? 'selected' : '' }}>
                                                        {{ $name }}</option>
                                                @endforeach
                                            </select>
                                            @error('assign_couriers')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                @endif

                                @if (auth()->user()->role_id != 2)
                                    <div class="row">
                                        <div class="mb-3 col-6">
                                            <label for="superadmin_commission" class="form-label required">Super Admin
                                                Commission (%)</label>
                                            <input type="number" placeholder="Enter super admin commission"
                                                step="0.01" min="0"
                                                class="form-control @error('superadmin_commission') is-invalid @enderror"
                                                id="superadmin_commission" name="superadmin_commission"
                                                value="{{ old('superadmin_commission') }}">
                                            @error('superadmin_commission')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="mb-3 col-6">
                                            <label for="admin_commission" class="form-label required">Admin Commission
                                                (%)</label>
                                            <input type="number" placeholder="Enter admin commission" step="0.01"
                                                min="0"
                                                class="form-control @error('admin_commission') is-invalid @enderror"
                                                id="admin_commission" name="admin_commission"
                                                value="{{ old('admin_commission') }}">
                                            @error('admin_commission')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>  
                                    </div>
                                @endif
                                
                                <div class="row">
                                    <div class="col-12" id="profile_pic">
                                        <label for="profile_pic" class="form-label">Profile Image</label>
                                        <input type="file"
                                            class="form-control @error('profile_pic') is-invalid @enderror"
                                            id="profile_pic" name="profile_pic" accept="image/*">
                                        <small class="form-hint">Preferred size: 250px x 250px (JPG, JPEG, PNG
                                            allowed).</small>
                                        @error('profile_pic')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <div class="{{ auth()->user()->role_id != 2 ? 'mb-3 mt-3' : 'mb-0 mt-0' }}">
                                            <img id="logoPreview" src="#" alt="Admin Logo Preview"
                                                style="display: none; max-width: 150px; max-height: 150px; border: 1px solid #ddd; padding: 5px; border-radius: 4px;">
                                        </div>
                                    </div>
                                </div>
                                @if (auth()->user()->role_id != 2)
                                    <div class="row">
                                        <!-- Kyc -->
                                        <div class="col-md-6">
                                            <label for="kyc_verify" class="form-label required">KYC Status</label>
                                            <div>
                                                <label class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" id="status_completed"
                                                        name="kyc_verify" value="Completed">
                                                    <span class="form-check-label" for="status_completed">Completed</span>
                                                </label>
                                                <label class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" id="status_pending"
                                                        name="kyc_verify" value="Pending" checked>
                                                    <span class="form-check-label" for="status_pending">Pending</span>
                                                </label>
                                            </div>
                                        </div>
                                        <!-- Satus -->
                                        <div class="col-md-6">
                                            <label for="status" class="form-label required">Status</label>
                                            <div>
                                                <label class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" id="status_active"
                                                        name="status" value="Active" checked>
                                                    <span class="form-check-label" for="status_active">Active</span>
                                                </label>
                                                <label class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" id="status_inactive"
                                                        name="status" value="Inactive">
                                                    <span class="form-check-label" for="status_inactive">Inactive</span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>

                            <div class="p-0 modal-body">
                                <div class="px-3 py-2 bg-primary-lt fs-3 fw-medium">Credentials</div>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <!-- Email -->
                                    <div class="mb-3 col-12">
                                        <label for="email" class="form-label required">Email</label>
                                        <input type="email" class="form-control @error('email') is-invalid @enderror"
                                            id="email" name="email" placeholder="Enter email" autocomplete="off"
                                            value="{{ old('email') }}">
                                        @error('email')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row">
                                    <!-- Password -->
                                    <div class="col-12">
                                        <label for="email" class="form-label required">Password</label>
                                        <div class="input-group input-group-flat">
                                            <input type="password" id="password" name="password"
                                                class="form-control @error('password') is-invalid @enderror"
                                                placeholder="Enter password" autocomplete="new-password" value="">
                                            <span class="input-group-text">
                                                <a href="javascript:void(0)" class="link-secondary show-pass"
                                                    onclick="togglePass('#password','show')" data-bs-toggle="tooltip"
                                                    aria-label="Show Password" data-bs-original-title="Show password">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                        height="24" viewBox="0 0 24 24" stroke-width="2"
                                                        stroke="currentColor" fill="none" stroke-linecap="round"
                                                        stroke-linejoin="round">
                                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                        <circle cx="12" cy="12" r="2"></circle>
                                                        <path
                                                            d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7">
                                                        </path>
                                                    </svg>
                                                </a>
                                                <a href="javascript:void(0)" class="link-secondary hide-pass d-none"
                                                    onclick="togglePass('#password','hide')" data-bs-toggle="tooltip"
                                                    aria-label="Hide Password" data-bs-original-title="Hide password">
                                                    <svg xmlns="http://www.w3.org/2000/svg"
                                                        class="icon icon-tabler icon-tabler-eye-off" width="32"
                                                        height="32" viewBox="0 0 24 24" stroke-width="2"
                                                        stroke="currentColor" fill="none" stroke-linecap="round"
                                                        stroke-linejoin="round">
                                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                        <line x1="3" y1="3" x2="21"
                                                            y2="21">
                                                        </line>
                                                        <path d="M10.584 10.587a2 2 0 0 0 2.828 2.83"></path>
                                                        <path
                                                            d="M9.363 5.365a9.466 9.466 0 0 1 2.637 -.365c4 0 7.333 2.333 10 7c-.778 1.361 -1.612 2.524 -2.503 3.488m-2.14 1.861c-1.631 1.1 -3.415 1.651 -5.357 1.651c-4 0 -7.333 -2.333 -10 -7c1.369 -2.395 2.913 -4.175 4.632 -5.341">
                                                        </path>
                                                    </svg>
                                                </a>
                                            </span>
                                            @error('password')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Card Footer -->
                            <div class="card-footer">
                                <button type="submit" class="btn btn-primary me-3">Save</button>
                                <a href="{{ route('franchises.index') }}" class="btn">Cancel</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script>
        var assignCouriersSelect = null;
        // @formatter:off
        document.addEventListener("DOMContentLoaded", function() {
            assignCouriersSelect = new TomSelect("#assign_couriers", {
                copyClassesToDropdown: false,
                dropdownParent: 'body',
                controlInput: '<input>',
                render: {
                    item: function(data, escape) {
                        return '<div>' + (data.customProperties ?
                            '<span class="dropdown-item-indicator">' + data.customProperties +
                            '</span>' : '') + escape(data.text) + '</div>';
                    },
                    option: function(data, escape) {
                        return '<div>' + (data.customProperties ?
                            '<span class="dropdown-item-indicator">' + data.customProperties +
                            '</span>' : '') + escape(data.text) + '</div>';
                    },
                },
            });
        });
        // @formatter:on
    </script>
    <script>
        $(document).ready(function() {
            $('#profile_pic').change(function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $('#logoPreview').attr('src', e.target.result).show();
                        $('#logoPreview').parent().addClass('mt-3');
                        $('#logoError').addClass('d-none');
                    }
                    reader.readAsDataURL(file);
                } else {
                    $('#logoPreview').hide();
                    $('#logoPreview').parent().removeClass('mt-3');
                }
            });
            // Handle aadharcard_image preview
            $('#aadharcard_image').change(function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $('#aadharcardPreview').attr('src', e.target.result).show();
                        $('#aadharcardPreview').parent().addClass('mt-3');
                        $('#logoError').addClass('d-none');
                    }
                    reader.readAsDataURL(file);
                } else {
                    $('#aadharcardPreview').hide();
                    $('#aadharcardPreview').parent().removeClass('mt-3');
                }
            });
            // Handle pancard_image preview
            $('#pancard_image').change(function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $('#pancardPreview').attr('src', e.target.result).show();
                        $('#pancardPreview').parent().addClass('mt-3');
                        $('#logoError').addClass('d-none');
                    }
                    reader.readAsDataURL(file);
                } else {
                    $('#pancardPreview').hide();
                    $('#pancardPreview').parent().removeClass('mt-3');
                }
            });
            // Grab old values from Blade
            $("#pincode").on('input', function() {
                let pincode = $(this).val();

                if (pincode.length === 6) { // Ensure 6-digit pincode
                    $.ajax({
                        url: '{{ route('getstatecity', ':pincode') }}'.replace(':pincode',
                            pincode),
                        type: 'GET',
                        success: function(data) {
                            if (data.state_name) {
                                $("#state_id").val(data.id);
                                $("#state").val(data.state_name);
                            }
                            if (data.city_name) {
                                $("#city_id").val(data.id);
                                $("#city").val(data.city_name);
                            }
                        },
                        error: function() {
                            toastr.error('Invalid pincode or data not found.');
                            // alert('Invalid pincode or data not found.');
                        }
                    });
                } else {
                    $("#state_id").val("");
                    $("#state").val("");
                    $("#city_id").val("");
                    $("#city").val("");
                }
            });
        });
    </script>
@endsection