@extends('layout.template')

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

@section('content')

<div class="container py-5">

    <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>

                {{-- GST --}}
                <div class="mb-3">
                    <label class="form-label">GST Number</label>
                    <input type="text" name="gst_number" class="form-control">
                </div>

                <button type="submit" class="btn btn-primary w-100">
                    Submit
                </button>

            </form>

        </div>
    </div>

</div>
<script>
$('#roleForm').on('submit', function(e) {

    e.preventDefault();

    let btn = $(this).find('button');
    btn.prop('disabled', true).text('Submitting...');

    let formData = new FormData(this);

    $.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: 'Your franchise request has been successfully submitted. We appreciate your interest and will review your application and respond shortly.'
            }).then(() => {
                window.location.href = "/";
            });
        },

        error: function(err) {

            let msg = err.responseJSON?.message || 'Error occurred';

            Swal.fire('Error', msg, 'error');

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

});
</script>
@endsection