@extends('sms::layouts.master')

@section('content')
    <style>
        .mark-unread {
            background-color: rgba(34, 48, 62, 0.06);
        }

        .btn:disabled {
            border-color: transparent;
        }
    </style>
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="app-email card">
            <div class="row g-0">
                <!-- Email Sidebar -->
                <div id="app-email-sidebar" class="col app-email-sidebar border-end flex-grow-0"
                    style="background-color: #fff;">
                    <div class="btn-compost-wrapper d-grid">
                        <button class="btn btn-primary btn-compose" data-bs-toggle="modal"
                            data-bs-target="#emailComposeSidebar" id="emailComposeSidebarLabel">Send SMS</button>
                        <button class="btn btn-outline-primary btn-compose my-3" data-bs-toggle="modal"
                            data-bs-target="#QuickSMSSidebar" id="emailComposeSidebarLabel">Quick SMS</button>
                    </div>
                    <!-- Email Filters -->
                    <div class="email-filters pt-4 pb-2 ps">
                        <!-- Email Filters: Folder -->
                        <ul class="email-filter-folders list-unstyled">
                            <li class="active d-flex mb-1" data-target="sent" id="data_target_sent">
                                <a href="javascript:void(0);" id="side_sent" class="d-flex flex-wrap align-items-center">
                                    <i class="bx bx-send"></i>
                                    <span class="align-middle ms-2">Sent</span>
                                </a>
                            </li>
                            <li class=" d-flex justify-content-between align-items-center mb-1" data-target="received">
                                <a href="javascript:void(0);" class="d-flex flex-wrap align-items-center">
                                    <i class="bx bx-envelope"></i>
                                    <span class="align-middle ms-2">Received</span>
                                </a>
                                {{-- <div class="badge bg-label-primary rounded-pill">21</div> --}}
                            </li>
                            <li class="d-flex justify-content-between align-items-center mb-1" data-target="draft">
                                <a href="javascript:void(0);" class="d-flex flex-wrap align-items-center">
                                    <i class="bx bx-edit"></i>
                                    <span class="align-middle ms-2">Draft</span>
                                </a>
                                {{-- <div class="badge bg-label-warning rounded-pill">2</div> --}}
                            </li>
                            <li class="d-flex align-items-center" data-target="trash">
                                <a href="javascript:void(0);" class="d-flex flex-wrap align-items-center">
                                    <i class="bx bx-trash"></i>
                                    <span class="align-middle ms-2">Trash</span>
                                </a>
                            </li>
                        </ul>
                        <!-- Email Filters: Labels -->
                        <div class="email-filter-labels pt-4">
                            <p class="small mx-6 text-muted text-uppercase">Labels</p>
                            <ul class="list-unstyled mb-2">
                                <li data-target="work">
                                    <a href="javascript:void(0);">
                                        <i class="badge badge-dot bg-success"></i>
                                        <span class="align-middle ms-2">Paid</span>
                                    </a>
                                </li>
                                <li data-target="company">
                                    <a href="javascript:void(0);">
                                        <i class="badge badge-dot bg-warning"></i>
                                        <span class="align-middle ms-2">Pending</span>
                                    </a>
                                </li>
                                <li data-target="important">
                                    <a href="javascript:void(0);">
                                        <i class="badge badge-dot bg-danger"></i>
                                        <span class="align-middle ms-2">Other</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <!--/ Email Filters -->
                        <div class="ps__rail-x" style="left: 0px; bottom: 0px;">
                            <div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;">
                            </div>
                        </div>
                        <div class="ps__rail-y" style="top: 0px; right: 0px;">
                            <div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;">
                            </div>
                        </div>
                    </div>
                </div>
                <!--/ Email Sidebar -->

                <!-- Emails List -->

                <div class="col app-emails-list">
                    <div class="card shadow-none border-0 rounded-0">
                        <div class="card-body emails-list-header p-3 py-2">
                            <!-- Email List: Search -->
                            <div class="d-flex justify-content-between align-items-center px-3 mt-2">
                                <div class="d-flex align-items-center w-100">
                                    <i class="bx bx-menu bx cursor-pointer d-block d-lg-none me-4 mb-4"
                                        data-bs-toggle="sidebar" data-target="#app-email-sidebar" data-overlay=""
                                        id="toggle-app-email-view"></i>
                                    <div class="mb-4 w-100">
                                        <div class="input-group input-group-merge shadow-none">
                                            <span class="input-group-text border-0 p-0 pe-4" id="email-search">
                                                <i class="bx bx-search bx-md text-body"></i>
                                            </span>
                                            <input type="text" class="form-control email-search-input border-0 py-0"
                                                placeholder="Search By Name" aria-label="Search"
                                                aria-describedby="email-search">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr class="mx-n3 emails-list-header-hr mb-2">
                            <!-- Email List: Actions -->
                            <div class="d-flex justify-content-between align-items-center ps-1">
                                <div class="d-flex align-items-center">
                                    <div class="form-check mb-0 ms-2">
                                        <input class="form-check-input" type="checkbox" id="email-select-all">
                                        <label class="form-check-label" for="email-select-all"></label>
                                    </div>
                                    <div class="btn btn-icon me-1"><i
                                            class="bx bx-trash bx-md email-list-delete cursor-pointer"></i>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center">
                                    @if ($sms->hasPages())
                                        <div class="float-right d-flex align-items-center gap-2">
                                            @php
                                                $from = ($sms->currentPage() - 1) * $sms->perPage() + 1;
                                                $to = min($sms->total(), $sms->currentPage() * $sms->perPage());
                                            @endphp

                                            <span>{{ $from }}–{{ $to }}/{{ $sms->total() }}</span>

                                            <div class="btn-group">
                                                {{-- Previous Page --}}
                                                @if ($sms->onFirstPage())
                                                    <button type="button" class="btn btn-default btn-sm" disabled>
                                                        <i class="icon-base bx bx-chevron-left icon-md scaleX-n1-rtl"></i>
                                                    </button>
                                                @else
                                                    <a href="{{ $sms->previousPageUrl() }}"
                                                        class="btn btn-default btn-sm">
                                                        <i class="icon-base bx bx-chevron-left icon-md scaleX-n1-rtl"></i>
                                                    </a>
                                                @endif

                                                {{-- Next Page --}}
                                                @if ($sms->hasMorePages())
                                                    <a href="{{ $sms->nextPageUrl() }}" class="btn btn-default btn-sm">
                                                        <i class="icon-base bx bx-chevron-right icon-md scaleX-n1-rtl"></i>
                                                    </a>
                                                @else
                                                    <button type="button" class="btn btn-default btn-sm" disabled>
                                                        <i class="icon-base bx bx-chevron-right icon-md scaleX-n1-rtl"></i>
                                                    </button>
                                                @endif
                                            </div>
                                        </div>
                                    @endif
                                    <span class="btn btn-icon me-1">
                                        <i class="bx bx-refresh bx-md scaleX-n1-rtl cursor-pointer email-refresh"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <hr class="container-m-nx m-0">
                        <!-- Email List: Items -->
                        <div class="email-list pt-0 ps ps--active-y">
                            <ul class="list-unstyled list-email m-0">
                                @include('sms::partials.sms-list')
                            </ul>

                        </div>
                    </div>
                    <div class="app-overlay"></div>
                </div>
                <!-- /Emails List -->

                <!-- Email View -->
                <!-- Email View -->
            </div>

            <!-- Compose Email -->
            <div class="app-email-compose modal" id="emailComposeSidebar" tabindex="-1"
                aria-labelledby="emailComposeSidebarLabel" aria-hidden="true">
                <div class="modal-dialog m-0 me-md-6 mb-6 modal-lg">
                    <div class="modal-content p-0">
                        <div class="modal-header py-3 justify-content-between"
                            style="background-color: rgba(34,48,62,.06);">
                            <h5 class="modal-title text-body fs-5">SMS</h5>
                            <div class="d-flex align-items-center gap-2">
                                <button type="button" class="btn btn-sm btn-icon"><i class="bx bx-minus"></i></button>
                                <button type="button" class="btn btn-sm btn-icon" data-bs-dismiss="modal"
                                    aria-label="Close"><i class="bx bx-x"></i></button>
                            </div>
                        </div>
                        <div class="modal-body flex-grow-1 pb-sm-0 px-6 py-2">
                            <form action="{{ route('sms.message.store') }}" method="POST" class="email-compose-form" >
                                @csrf
                                <div class="email-compose-subject d-flex align-items-center">
                                    <label for="email-subject" class="fw-medium text-muted">Phone:</label>
                                    <input type="text" autocomplete="off" required maxlength="12"
                                        placeholder="09, 07 or 251"
                                        class="form-control border-0 shadow-none flex-grow-1 mx-2 px-5" name="phone"
                                        id="phone">
                                </div>
                                <hr class="mx-n6 my-0">
                                <div class="email-compose-subject d-flex align-items-center">
                                    <label for="email-subject" class="fw-medium text-muted">Name:</label>
                                    <input type="text" autocomplete="off" required placeholder="Full Name"
                                        class="form-control border-0 shadow-none flex-grow-1 mx-2 px-5" name="name"
                                        id="name" oninput="this.value = this.value.toUpperCase();">
                                </div>
                                <hr class="mx-n6 my-0">
                                <div class="email-compose-subject d-flex align-items-center">
                                    <label for="email-subject" class="fw-medium text-muted">Bank:</label>
                                    <select type="text" autocomplete="off" required
                                        class="form-control border-0 shadow-none flex-grow-1 mx-2 px-7" name="bank"
                                        id="bank">
                                        @foreach ($banks as $bank)
                                            @if ($bank->is_default)
                                                <option value="{{ $bank->id }}" selected>
                                                    {{ $bank->bank_name }}</option>
                                            @else
                                                <option value="{{ $bank->id }}">
                                                    {{ $bank->bank_name }}
                                                </option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                                <hr class="mx-n6 my-0">
                                <div class="email-compose-subject d-flex align-items-center">
                                    <label for="email-subject" class="fw-medium text-muted">Money:</label>
                                    <input type="text" class="form-control border-0 shadow-none flex-grow-1 mx-2"
                                        name="money" id="money" placeholder="ETB" required>
                                </div>
                                <div class="email-compose-message">
                                    <hr class="mx-n6 my-0">
                                    <div id="message" style="height: 150px;font-family: monospace;padding-top: 15px;">
                                        <p style="color: gray;font-family: revert;">Message...</p>
                                    </div>
                                </div>
                                <input type="hidden" name="status">
                                <hr class="mx-n6 my-0">
                                <div class="email-compose-actions d-flex justify-content-between align-items-center my-4">
                                    <div class="d-flex align-items-center">
                                        <div class="btn-group">
                                            <button type="submit" class="btn btn-primary" id="send_btn">Send
                                                <i class="bx bx-paper-plane bx-sm scaleX-n1-rtl ms-2"></i></button>
                                        </div>

                                        <button class="btn btn-label-primary mx-2" type="submit" id="draft_btn"><i
                                                class="bx bx-edit bx-sm scaleX-n1-rtl ms-2"></i>Save
                                            draft</button>
                                    </div>
                                    <div class="d-flex align-items-center gap-2">

                                        <button type="reset" class="btn btn-sm btn-icon" id="reset"><i
                                                class="bx bx-trash"></i></button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Compose Email -->
            {{-- Quick SMS --}}
            <div class="app-email-compose modal" id="QuickSMSSidebar" tabindex="-1"
                aria-labelledby="emailComposeSidebarLabel" aria-hidden="true">
                <div class="modal-dialog m-0 me-md-6 mb-6 modal-lg">
                    <div class="modal-content p-0">
                        <div class="modal-header py-3 justify-content-between"
                            style="background-color: rgba(34,48,62,.06);">
                            <h5 class="modal-title text-body fs-5">Quick SMS</h5>
                            <div class="d-flex align-items-center gap-2">
                                <button type="button" class="btn btn-sm btn-icon"><i class="bx bx-minus"></i></button>
                                <button type="button" class="btn btn-sm btn-icon" data-bs-dismiss="modal"
                                    aria-label="Close"><i class="bx bx-x"></i></button>
                            </div>
                        </div>
                        <div class="modal-body flex-grow-1 pb-sm-0 px-6 py-2">
                            <form action="{{ route('sms.quick') }}" method="POST" class="email-compose-form" >
                                @csrf
                                <div class="email-compose-subject d-flex align-items-center">
                                    <label class="fw-medium text-muted">Source:</label>
                                    <select name="source" id=""
                                        class="form-control border-0 shadow-none flex-grow-1 mx-2 px-5">
                                        <option value="Geez SMS" selected>Bunab Travel</option>
                                        <option value="bunab_sms_api_key">Bunab Ride</option>
                                    </select>
                                </div>
                                <hr class="mx-n6 my-0">
                                <div class="email-compose-subject d-flex align-items-center">
                                    <label class="fw-medium text-muted" style=" padding-right: 6px;">Phone:</label>
                                    <input class="form-control border-0 shadow-none flex-grow-1 mx-2 px-5"
                                        list="datalistOptions" id="driverDataList" placeholder="Type to search..."
                                        autocomplete="off" required name="phone">
                                    <datalist id="datalistOptions">
                                    </datalist>
                                </div>
                                <hr class="mx-n6 my-0">
                                <div class="email-compose-subject d-flex align-items-center">
                                    <textarea class="form-control border-0 shadow-none flex-grow-1 px-0 mx-0" rows="10" placeholder="Message..."
                                        style="overflow: hidden;" name="message"></textarea>
                                </div>
                                <input type="hidden" name="quick_status">
                                <hr class="mx-n6 my-0">
                                <div class="email-compose-actions d-flex justify-content-between align-items-center my-4">
                                    <div class="d-flex align-items-center">
                                        <div class="btn-group">
                                            <button type="submit" class="btn btn-primary" id="quick_send_btn">Send
                                                <i class="bx bx-paper-plane bx-sm scaleX-n1-rtl ms-2"></i></button>
                                        </div>

                                        <button class="btn btn-label-primary mx-2" type="submit" id="quick_draft_btn"><i
                                                class="bx bx-edit bx-sm scaleX-n1-rtl ms-2"></i>Save
                                            draft</button>
                                    </div>
                                    <div class="d-flex align-items-center gap-2">

                                        <button type="reset" class="btn btn-sm btn-icon" id="reset_quick"><i
                                                class="bx bx-trash"></i></button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            {{-- /Quick SMS --}}
        </div>

    </div>
    <!--/ Content -->
    {{-- Modal --}}
    <div class="modal fade" id="modalCenter" tabindex="-1" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalCenterTitle">Sent Fligt Information</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('sms.message.update', 0) }}" method="POST" id="ticketForm">
                    @csrf
                    @method('PUT')
                    <div class="modal-body">
                        <div class="row">
                            <div class="mb-3">
                                <label for="nameWithTitle" class="form-label">Passenger Name</label>
                                <input type="text" class="form-control" autocomplete="off" id="passengerName"
                                    readonly>
                            </div>
                            <div class="mb-3">
                                <label for="nameWithTitle" class="form-label">Ticket Number</label>
                                <input type="text" name="ticket_number" class="form-control" autocomplete="off"
                                    required>
                            </div>
                            <div class="mb-3">
                                <label for="nameWithTitle" class="form-label">Flight Number</label>
                                <input type="text" name="flight_number" class="form-control" autocomplete="off"
                                    required>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="exampleDataList" class="form-label">Sector: From</label>
                                <input type="text" name="sector_from"  class="form-control"
                                    oninput="this.value = this.value.toUpperCase();">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="exampleDataList" class="form-label">To</label>
                                <input type="text" name="sector_to"  class="form-control"
                                    oninput="this.value = this.value.toUpperCase();">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="nameWithTitle" class="form-label">Departure Date</label>
                                <input class="form-control" type="datetime-local" name="departure_date" required >
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="nameWithTitle" class="form-label">Arrival Date</label>
                                <input class="form-control" type="datetime-local" name="arrival_date" required >
                            </div>


                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" id="btn-close" data-bs-dismiss="modal">
                            Close
                        </button>
                        <button type="submit" class="btn btn-primary">Send</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    {{-- Toast --}}
    @if (session('success'))
        <div class="bs-toast toast toast-placement-ex m-2 fade bg-primary top-0 end-0 show" role="alert"
            aria-live="assertive" aria-atomic="true" data-delay="2000">
            <div class="toast-header">
                <i class="bx bx-bell me-2"></i>
                <div class="me-auto fw-semibold">BUNAB TRAVEL</div>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">{{ session('success') }}</div>
        </div>
    @endif
    @if ($errors->any())
        @foreach ($errors->all() as $error)
            <div class="bs-toast toast toast-placement-ex m-2 fade bg-primary top-0 end-0 show" role="alert"
                aria-live="assertive" aria-atomic="true" data-delay="2000">
                <div class="toast-header">
                    <i class="bx bx-bell me-2"></i>
                    <div class="me-auto fw-semibold">BUNAB TRAVEL</div>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">{{ $error }}</div>
            </div>
        @endforeach
    @enderror
    {{-- /Toast --}}
    <!-- Core JS -->
    <!-- build:js assets/vendor/js/core.js -->
    <script src="{{ asset('assets/sms-module/assets/vendor/libs/jquery/jquery.js') }}"></script>
    <script src="{{ asset('assets/sms-module/assets/vendor/libs/popper/popper.js') }}"></script>

    <script>
        document.getElementById('toggle-app-email-view').onclick = function() {
            const sidebar = document.getElementById('app-email-sidebar');
            sidebar.classList.add('show');

            document.addEventListener('click', outsideClickListener);
        };

        function outsideClickListener(event) {
            const sidebar = document.getElementById('app-email-sidebar');

            if (sidebar.classList.contains('show')) {
                if (!sidebar.contains(event.target) && event.target.id !== 'toggle-app-email-view') {
                    sidebar.classList.remove('show');
                    document.removeEventListener('click', outsideClickListener);
                }
            }
        }

        $(document).ready(function() {
            $('#money').blur(function(e) {
                e.preventDefault();

                let phone = $('#phone').val();
                let name = $('#name').val();
                let money = $('#money').val();
                let bank = $('#bank').val();

                if (phone && name && money) {
                    $.ajax({
                        url: 'prepare/message',
                        method: 'GET',
                        data: {
                            phone: phone,
                            name: name,
                            bank: bank,
                            money: money,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            document.getElementById('message').innerHTML = response.message;
                        },
                        error: function(xhr, status, error) {
                            $('#response').val('An error occurred.');
                        }
                    });
                } else {
                    $('#response').val('Please fill in all the fields.');
                }
            });

            $('#reset').click(function(e) {
                document.getElementById('message').innerHTML = '';
            });
            $('#reset_quick').click(function(e) {
                document.getElementById('message').innerHTML = '';
            });
            $('.email-unread').click(function(e) {
                const data = this.getAttribute('data-id');
                const [userId, name] = data.split('|');
                document.getElementById('passengerName').value = name.trim();
                const form = document.getElementById('ticketForm');
                form.action = form.action.replace(/0$/, userId.trim());
            });
            $('.email-resend').click(function(e) {
                const msgId = this.getAttribute('data-id');

                const url = `{{ route('sms.message.update', ':id') }}`.replace(':id', msgId);
                const xhr = new XMLHttpRequest();
                xhr.open('PATCH', url, true);
                xhr.setRequestHeader('Content-Type', 'application/json');
                xhr.setRequestHeader('X-CSRF-TOKEN',
                    '{{ csrf_token() }}');
                const data = {
                    status: 'draft'
                };
                xhr.send(JSON.stringify(data));
                xhr.onload = function() {
                    location.reload();
                };
            });

            $('.email-delete').click(function(e) {
                const msgId = this.getAttribute('data-id');
                const url = `{{ route('sms.message.destroy', ':id') }}`.replace(':id', msgId);
                const xhr = new XMLHttpRequest();
                xhr.open('POST', url, true);
                xhr.setRequestHeader('Content-Type', 'application/json');
                xhr.setRequestHeader('X-CSRF-TOKEN',
                    '{{ csrf_token() }}');
                const data = {
                    _method: 'DELETE'
                };
                xhr.send(JSON.stringify(data));
                xhr.onload = function() {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        console.log('Success:', xhr.responseText);
                    } else {
                        console.error('Error:', xhr.statusText);
                    }
                };

                xhr.onerror = function() {
                    console.error('Request failed');
                };

            });

            $('#send_btn').click(function(e) {
                document.querySelector('input[name="status"]').value = 'sent';
            });
            $('#draft_btn').click(function(e) {
                document.querySelector('input[name="status"]').value = 'draft';
            });
            $('#quick_send_btn').click(function(e) {
                document.querySelector('input[name="quick_status"]').value = 'sent';
            });
            $('#quick_draft_btn').click(function(e) {
                document.querySelector('input[name="quick_status"]').value = 'draft';
            });

            $('#btn-close').click(function(e) {
                const modal = document.getElementById('modalCenter');
                modal.classList.remove('show');
                modal.style.display = 'none';
            })
        });

        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('side_sent').click();
        });

        function sendTicket(id) {
            if (window.innerWidth <= 768) {
                const form = document.getElementById('ticketForm');
                form.action = form.action.replace(/0$/, id);

                const modal = document.getElementById('modalCenter');
                modal.style.display = 'block';
                modal.classList.add('show');
            }

        }
        document.getElementById('ticketForm').addEventListener('submit', function(e) {
            name = document.getElementById('passengerName').value;
            const confirmed = confirm('Are you certain you want to send this message to ' + name);

            if (!confirmed) {
                e.preventDefault();
            }
        });

        let peopleData = []; // Store the result to access mobile later

        const input = document.getElementById('driverDataList');
        const datalist = document.getElementById('datalistOptions');

        input.addEventListener('input', function() {
            const search = this.value;

            if (search.length < 2) return;

            fetch(`/search-driver?q=${encodeURIComponent(search)}`)
                .then(response => response.json())
                .then(data => {
                    peopleData = data; // save for later
                    datalist.innerHTML = '';

                    data.forEach(item => {
                        const option = document.createElement('option');
                        option.value = item.full_name; // shown in dropdown
                        datalist.appendChild(option);
                    });
                });
        });

        // When user selects a value
        input.addEventListener('change', function() {
            const selectedName = this.value;
            const selectedPerson = peopleData.find(p => p.full_name === selectedName);

            if (selectedPerson) {
                // Set mobile number (or any field you want) into the input
                // this.value = selectedPerson.phone;
                let phone = selectedPerson.phone;
                if(phone.startsWith('+')){
                    this.value = phone.slice(1)
                }else this.value = selectedPerson.phone;
                // Optional: hide datalist by clearing it
                datalist.innerHTML = '';
            }
        });
    </script>
@endsection