@extends($layout)
@section('styles')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
@endsection
@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">

                    <div class="card-header">{{ __('Register as Stringer') }}</div>



                    <div class="row">
                        <div class="col-12 text-end">



                            {{-- <a href="/users" class="btn bg-gradient-dark mb-0 me-4"><i class="fas fa-user"></i>
                                &nbsp;&nbsp;All Users
                            </a> --}}

                            {{-- @hasrole('dio')
                            <a href="/users" class="btn bg-gradient-dark mb-0 me-4"><i class="fas fa-user"></i>
                                &nbsp;&nbsp;All Videographers
                            </a>
                            @endhasrole --}}

                        </div>
                    </div>

                    <div class="card-body">

                        <form id="myForm" method="POST" action="/stringer/register/store">
                            @csrf

                            <div class="form-group row">
                                <label for="name"
                                    class="col-md-4 col-form-label text-md-right">{{ __('Name') }}<sup></label>

                                <div class="col-md-6">
                                    <input id="name" type="text"
                                        class="form-control @error('name') is-invalid @enderror" name="name"
                                        value="{{ old('name') }}" required autocomplete="name" autofocus>

                                    @error('name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>







                            <div class="form-group row">
                                <label for="email"
                                    class="col-md-4 col-form-label text-md-right">{{ __('E-Mail (Username)') }}</label>

                                <div class="col-md-6">
                                    <input id="email" type="email"
                                        class="form-control @error('email') is-invalid @enderror" name="email"
                                        value="{{ old('email') }}" required autocomplete="email">

                                    @error('email')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="password"
                                    class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>

                                <div class="col-md-6">
                                    <input id="password" type="password"
                                        class="form-control @error('password') is-invalid @enderror" name="password"
                                        required minlength="8" autocomplete="new-password">

                                    @error('password')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>



                            <div class="form-group row">
                                <label for="password-confirm"
                                    class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>

                                <div class="col-md-6">
                                    <input id="password-confirm" minlength="8" type="password" class="form-control"
                                        name="password_confirmation" required autocomplete="new-password">
                                </div>
                            </div>






                            <div class="form-group row">
                                <label for="district" class="col-md-4 col-form-label text-md-right">District /
                                    Office</label>

                                <div class="col-md-6">
                                    <select id="district" class="form-control @error('district') is-invalid @enderror"
                                        name="district" required>
                                        @foreach ($districts as $district)
                                            <option value="{{ $district->id }}">{{ $district->name }}</option>
                                        @endforeach
                                    </select>

                                    @error('district')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="phone"
                                    class="col-md-4 col-form-label text-md-right">{{ __('Phone') }}</label>

                                <div class="col-md-6">
                                    <input id="phone" type="tel"
                                        class="form-control @error('phone') is-invalid @enderror" name="phone"
                                        value="{{ old('phone') }}" required autocomplete="phone">


                                    @error('phone')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div id="otp-success" class="alert alert-success" style="display: none;">
                                OTP sent successfully
                            </div>

                            <div class="form-group row">
                                <div class="col-md-6 offset-md-4">
                                    <button type="button" id="send-otp" class="btn btn-secondary">
                                        Send OTP
                                    </button>
                                    <button type="button" id="resend-otp" class="btn btn-secondary" disabled>
                                        Resend OTP
                                    </button><br>
                                    <span id="timer" class="ml-2" style="display: none;"></span>
                                </div>
                            </div>



                            <div class="form-group row" id="otp-field" style="display: none;">
                                <label for="otp"
                                    class="col-md-4 col-form-label text-md-right">{{ __('OTP') }}</label>

                                <div class="col-md-6">
                                    <input required id="otp" type="text"
                                        class="form-control @error('otp') is-invalid @enderror" name="otp"
                                        value="{{ old('otp') }}" autocomplete="otp">

                                    @error('otp')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div id="otp-error" class="alert alert-danger" style="display: none; color:white;">
                                Too many requests. Please try again later.
                            </div>

                            <div id="otp-error-user-exists" class="alert alert-danger"
                                style="display: none; color:white;">
                                This phone number already belongs to a user.
                            </div>





                            <div class="form-group row mb-0">
                                <div class="col-md-6 offset-md-4">
                                    <button disabled id="submitButton" type="submit" class="btn btn-primary">
                                        {{ __('Register') }}
                                    </button>
                                </div>
                            </div>
                        </form>
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        @if (session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        $('#district').select2({
            placeholder: "Select a district / office",
            allowClear: true
        });
    });

    document.addEventListener('DOMContentLoaded', function() {
        var form = document.getElementById('myForm');
        var phoneInput = document.getElementById('phone');

        var resendOtpButton = $('#resend-otp');
        var timerElement = $('#timer');
        var countdown;

        form.addEventListener('submit', function(event) {
            if (!isValidPhone(phoneInput.value)) {
                phoneInput.classList.add('is-invalid');
                event.preventDefault();
            } else {
                phoneInput.classList.remove('is-invalid');
            }
        });

        $('#send-otp').on('click', function() {
            var phoneNumber = $('#phone').val();
            $('#otp-error-user-exists').hide();

            if (isValidPhone(phoneNumber)) {
                $.ajax({
                    url: '/send-sms',
                    method: 'POST',
                    data: {
                        phone: phoneNumber,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            $('#otp-success').show();
                            setTimeout(function() {
                                $('#otp-success').hide();
                            }, 10000);
                            $('#otp-field').show();
                            $('#send-otp').hide();
                            startTimer(60);

                        } else {
                            alert(response
                                .message);
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 429) {
                            $('#otp-error').show();
                            setTimeout(function() {
                                $('#otp-error').hide();
                            }, 10000);
                        } if (xhr.status === 404) {
                            $('#otp-error-user-exists').show();
                            setTimeout(function() {
                                $('#otp-error-user-exists').hide();
                            }, 10000);
                        } else {
                            alert('Failed to send OTP. Please try again.');
                        }
                    }
                });
            } else {
                alert('Please enter a valid phone number.');
            }
        });

        resendOtpButton.on('click', function() {
            var phoneNumber = $('#phone').val();
            if (isValidPhone(phoneNumber)) {
                $.ajax({
                    url: '/send-sms',
                    method: 'POST',
                    data: {
                        phone: phoneNumber,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            $('#otp-success').show();
                            startTimer(60); 
                        } else {
                            alert(response.message);
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 429) {
                            $('#otp-error').show();
                        } else {
                            alert('Failed to send OTP. Please try again.');
                        }
                    }
                });
            } else {
                alert('Please enter a valid phone number.');
            }
        });

        function startTimer(duration) {
            resendOtpButton.prop('disabled', true);
            timerElement.show();
            timerElement.text(`Resend OTP in ${duration} seconds`);

            countdown = setInterval(function() {
                duration--;
                timerElement.text(`Resend OTP in ${duration} seconds`);
                if (duration <= 0) {
                    clearInterval(countdown);
                    resendOtpButton.prop('disabled', false);
                    timerElement.hide();
                }
            }, 1000);
        }

        function isValidPhone(phone) {
            var phoneRegex = /^[0-9]{10}$/;

            return phoneRegex.test(phone);
        }

        function checkFields() {
            const fields = [
                'name',
                'email',
                'password',
                'password-confirm',
                'district',
                'phone',
                'otp'
            ];

            const allFilled = fields.every(id => document.getElementById(id).value.trim() !== '');

            document.getElementById('submitButton').disabled = !allFilled;
        }

        const fields = [
            'name',
            'email',
            'password',
            'password-confirm',
            'district',
            'phone',
            'otp'
        ];

        fields.forEach(id => {
            document.getElementById(id).addEventListener('input', checkFields);
        });
    });
</script>