@php
    use Illuminate\Support\Str;
@endphp
@extends('adminmodule::layouts.master')
@section('title', 'Send Drivers SMS')
@push('css_or_js')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endpush

@section('content')

    <div class="main-content">
        <div class="container-fluid">
            <div class="d-flex flex-wrap justify-content-between gap-3 align-items-center mb-4">
                <h2 class="fs-22">Send SMS For Drivers</h2>
            </div>

            <form id="smsForm" action="{{ route('admin.notification.sms.add') }}" method="post">
                @csrf
                <div class="card">
                    <div class="card-body">
                        <div class="row gy-4">
                            <div class="col-lg-8">
                                <div class="row align-items-end">
                                    <div class="col-sm-8">
                                        <div class="mb-4">
                                            <label for="title" class="mb-2 text-capitalize">Sms Body
                                                <span class="text-danger">*</span></label>
                                            <textarea name="sms_body" id="description" rows="5" class="form-control"
                                                placeholder="write your message here" required></textarea>
                                            @error('sms_body')
                                                <span class="fs-12 text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-8">
                                <div class="row align-items-end">
                                    <div class="col-sm-8">
                                        <div class="mb-4">
                                            {{-- list of drivers --}}
                                            <label for="driver_phones" class="form-label"> Select Drivers</label>
                                            <select name="driver_phones[]" id="driver_phones" class="form-control" multiple
                                                style="height: 200px;" required>
                                                @foreach ($drivers as $driver)
                                                    <option value="{{ $driver->phone }}">{{ $driver->full_name }}</option>
                                                @endforeach
                                            </select>
                                            <small class="text-muted">Hold down <kbd>Ctrl</kbd> (Windows) or <kbd>Cmd</kbd>
                                                (Mac) to select
                                                multiple.</small>
                                            @error('driver_phones')
                                                <span class="fs-12 text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Progress Bar Container --}}
                        <div id="progressBarContainer" class="mt-4" style="display: none;">
                            <div class="progress" style="height: 25px;">
                                <div id="progressBar"
                                    class="progress-bar progress-bar-striped progress-bar-animated bg-success"
                                    role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0"
                                    aria-valuemax="100"></div>
                            </div>
                            <p id="progressText" class="text-center mt-2">Sending messages...</p>
                        </div>
                        {{-- End Progress Bar Container --}}

                        {{-- Success/Error Message Container --}}
                        <div id="statusMessage" class="mt-4 text-center"></div>

                    </div>

                    <div class="d-flex justify-content-end gap-3 m-3 p-3">
                        <button class="btn btn-primary" type="submit">{{ translate('save') }}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('script')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#smsForm').on('submit', function(e) {
                e.preventDefault();

                // Clear previous messages and show progress bar
                $('#statusMessage').html('');
                $('#progressBarContainer').show();
                $('#progressBar').css('width', '5%').attr('aria-valuenow', 5);
                $('#progressText').text('Preparing request...');

                const form = $(this);
                const url = form.attr('action');
                const formData = form.serialize();

                // Simulate progress (optional, but good for UX)
                let progress = 5;
                const interval = setInterval(() => {
                    if (progress < 90) {
                        progress += Math.floor(Math.random() * 5) + 1;
                        $('#progressBar').css('width', progress + '%').attr('aria-valuenow',
                            progress);
                    }
                }, 500);

                // Send AJAX request
                $.ajax({
                    type: 'POST',
                    url: url,
                    data: formData,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        clearInterval(interval);
                        $('#progressBar').css('width', '100%').attr('aria-valuenow', 100);
                        $('#progressText').text('Completed!');

                        if (response.success) {
                            $('#statusMessage').html(
                                '<div class="alert alert-success mt-3" role="alert">' +
                                response.message + '</div>');
                        } else {
                            // The API returns a non-200 status or a success: false payload
                            let errorMessage =
                                'An error occurred while sending SMS. Please check the API response.';
                            if (response.error) {
                                errorMessage = 'API Error: ' + response.error;
                            } else if (response.message) {
                                errorMessage = response.message;
                            }
                            $('#statusMessage').html(
                                '<div class="alert alert-danger mt-3" role="alert">' +
                                errorMessage + '</div>');
                        }
                    },
                    error: function(xhr) {
                        clearInterval(interval);
                        $('#progressBar').css('width', '100%').attr('aria-valuenow', 100)
                            .removeClass('bg-success').addClass('bg-danger');
                        $('#progressText').text('Failed!');

                        let errorMessage = 'An unexpected error occurred. Please try again.';
                        if (xhr.responseJSON && xhr.responseJSON.error) {
                            errorMessage = 'Server Error: ' + xhr.responseJSON.error;
                        }
                        $('#statusMessage').html(
                            '<div class="alert alert-danger mt-3" role="alert">' +
                            errorMessage + '</div>');
                    },
                    complete: function() {
                        setTimeout(() => {
                            $('#progressBarContainer').hide();
                        }, 2000); // Hide after 2 seconds
                    }
                });
            });
        });
    </script>
@endpush