@extends('layout.template')

@section('title','Register as Franchise')

@section('content')
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<div class="container py-5">
    <div class="text-center mb-4">
        <p class="mb-0">
            Already have a Franchise account?
            <a href="https://demoweblinks.in/cusella/public/" class="fw-bold text-warning" target="_blank">
                Login here
            </a>
        </p>
    </div>
    <div class="card shadow-sm mx-auto" style="max-width:600px;">
        <div class="card-body">

            <h4 class="mb-4 text-center">Become a Franchisee</h4>
            <p class="text-center">Please fill in the following details</p>

            <form id="roleForm">

                @csrf

                {{-- ROLE --}}
                <div class="mb-3">
                    <label class="form-label">Select Role</label>
                    <select name="role" class="form-control" required>
                        <option value="">Choose Role</option>
                        <option value="franchise">Franchise</option>
                        <option value="zonal_franchise">Zonal Franchise</option>
                    </select>
                </div>

                {{-- SHOP NAME --}}
                <div class="mb-3">
                    <label class="form-label">Shop Name</label>
                    <input type="text" name="legal_shop_name" class="form-control" required>
                </div>

                {{-- ADDRESS --}}
                <div class="mb-3">
                    <label class="form-label">Shop Address</label>
                    <textarea name="legal_shop_address" class="form-control" required></textarea>
                </div>

                {{-- MOBILE --}}
                <!-- <div class="mb-3">
                    <label class="form-label">Mobile Number</label>
                    <input type="text" name="shop_mobile_number" class="form-control" required>
                </div> -->

                <div class="mb-3">
                    <label class="form-label">Mobile Number</label>

                    <div class="input-group">
                        <span class="input-group-text">+91</span>
                        <input type="text"
                            name="shop_mobile_number"
                            class="form-control"
                            maxlength="10"
                            placeholder="Enter mobile number"
                            required>
                    </div>
                </div>

                {{-- GST --}}
                <div class="mb-3">
                    <label class="form-label">GST Number</label>
                    <input type="text" name="gst_number" class="form-control">
                </div>
                <div class="mb-3">
                    <label class="form-label">Password</label>
                    <div class="position-relative">
                        <input
                            type="password"
                            id="password"
                            name="password"
                            class="form-control pe-5"
                            minlength="8"
                            required>

                        <!-- Eye Icon -->
                        <span
                            onclick="togglePassword()"
                            class="position-absolute top-50 end-0 translate-middle-y me-3"
                            style="cursor: pointer;">
                            <iconify-icon id="eyeIcon" icon="mdi:eye-off-outline" width="22"></iconify-icon>
                        </span>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary w-100">
                    Submit
                </button>

            </form>

        </div>
    </div>

</div>
<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $('#roleForm').on('submit', function(e) {

        e.preventDefault();

        let form = this;
        let btn = $(this).find('button');

        // 🔥 GET VALUES
        let role = $('[name="role"]').val().trim();
        let shopName = $('[name="legal_shop_name"]').val().trim();
        let address = $('[name="legal_shop_address"]').val().trim();
        let mobile = $('[name="shop_mobile_number"]').val().trim();
        let gst = $('[name="gst_number"]').val().trim();
        let password = $('[name="password"]').val().trim();
        // 🔴 VALIDATION

        // Role
        if (!role) {
            Swal.fire('Validation Error', 'Please select a role', 'warning');
            return;
        }

        // Shop Name
        if (shopName.length < 3) {
            Swal.fire('Validation Error', 'Shop name must be at least 3 characters', 'warning');
            return;
        }

        // Address
        if (address.length < 5) {
            Swal.fire('Validation Error', 'Please enter a valid address', 'warning');
            return;
        }

        // Mobile (Indian format)
        let mobileRegex = /^[6-9]\d{9}$/;
        if (!mobileRegex.test(mobile)) {
            Swal.fire('Validation Error', 'Enter valid 10-digit mobile number', 'warning');
            return;
        }

        // GST (optional but validate if filled)
        if (gst !== '') {
            let gstRegex = /^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$/;
            if (!gstRegex.test(gst)) {
                Swal.fire('Validation Error', 'Enter valid GST number', 'warning');
                return;
            }
        }

        // ✅ IF ALL VALID → SUBMIT
        btn.prop('disabled', true).text('Submitting...');

        let formData = new FormData(form);

        $.ajax({
            url: "{{ route('change.role') }}",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,

            success: function(res) {

                if (!res.success) {
                    Swal.fire('Error', res.message || 'Something went wrong', 'error');
                    btn.prop('disabled', false).text('Submit');
                    return;
                }

                Swal.fire({
                    icon: 'success',
                    title: 'Request submitted successfully!'
                }).then(() => {
                   window.location.href = "{{route('index')}}";
                });
            },

            error: function(err) {

                let msg = err.responseJSON?.message || 'Error occurred';
                Swal.fire('Error', msg, 'error');

                btn.prop('disabled', false).text('Submit');
            }
        });

    });

    function togglePassword() {
        const password = document.getElementById("password");
        const icon = document.getElementById("eyeIcon");

        if (password.type === "password") {
            password.type = "text";
            icon.setAttribute("icon", "mdi:eye-outline");
        } else {
            password.type = "password";
            icon.setAttribute("icon", "mdi:eye-off-outline");
        }
    }
</script>
@endsection