@extends('sms::layouts.master')
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row">
            <div class="col">
                <h6 class="text-muted">Settings</h6>
                <div class="nav-align-top mb-4">
                    <ul class="nav nav-pills mb-3" role="tablist">
                        <li class="nav-item">
                            <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab"
                                data-bs-target="#navs-pills-top-home" aria-controls="navs-pills-top-home"
                                aria-selected="true">
                                Templates
                            </button>
                        </li>
                        <li class="nav-item">
                            <button type="button" class="nav-link" role="tab" data-bs-toggle="tab"
                                data-bs-target="#navs-pills-top-profile" aria-controls="navs-pills-top-profile"
                                aria-selected="false">
                                Bank account
                            </button>
                        </li>
                        <li class="nav-item">
                            <button type="button" class="nav-link" role="tab" data-bs-toggle="tab"
                                data-bs-target="#navs-pills-top-sms" aria-controls="navs-pills-top-sms"
                                aria-selected="false">
                                SMS
                            </button>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="navs-pills-top-home" role="tabpanel">
                            <div class="col-12 col order-2 order-md-3 order-lg-2 mb-4">

                                <div class="row row-bordered g-10">
                                    <div class="col-md-4">
                                        <h5 class="card-header m-0 me-2 pb-3">Create New Template</h5>
                                        <form method="POST" action="{{ route('sms.settings.store') }}" id="templateForm">
                                            @csrf
                                            @method('POST')
                                            <div>
                                                <label for="defaultFormControlInput" class="form-label">Name</label>
                                                <select name="name" id="template_name" class="form-control" required>
                                                    <option value="">--Select--</option>
                                                    <option value="payment">Payment Request Message</option>
                                                    <option value="ticket">Flight Information Message</option>
                                                    <option value="trip_completion">Trip Completion Message for Customer
                                                    </option>
                                                    <option value="trip_start">Trip Start Message for Customer</option>
                                                    <option value="trip_requested">Trip Request</option>
                                                    <option value="trip_pending">Trip Pending for customer</option>
                                                    <option value="trip_accepted">Trip Accepted for customer</option>
                                                    <option value="trip_cancelled">Trip Cancelled for customer</option>
                                                </select>


                                            </div>
                                            <div class="py-3">
                                                <label for="exampleFormControlTextarea1" class="form-label">SMS
                                                    Template</label>
                                                <textarea class="form-control" name="template" id="template_message" rows="15" required></textarea>
                                                <div class="form-text">
                                                    [name] [phone] [bank_name] [bank_acc] [money] [ticket] [fligth_no]
                                                    [from] [to] [depa_date] [arr_date] [final_fare] [distance_covered]
                                                    [trip_destination] [trip_ref_id] [driver_name] [driver_phone]
                                                    [driver_vehicle] [driver_license_plate]
                                                    [initial_trip_fare] [total_passengers]
                                                </div>
                                            </div>

                                            <button type="submit" class="btn btn-label-primary mx-0"
                                                id="create_btn">Create</button>
                                        </form>

                                    </div>
                                    <div class="col-md-7">
                                        <h5 class="card-header m-0 me-2 pb-3">Templates</h5>
                                        <div class="table-responsive text-nowrap">
                                            <table class="table" id="templateSettingTable">
                                                <thead>
                                                    <tr>
                                                        <th>No.</th>
                                                        <th>Name</th>
                                                        <th>Template</th>
                                                        <th>Actions</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="table-border-bottom-0">
                                                    @foreach ($sms_templates as $template)
                                                        <tr>
                                                            <td>{{ $loop->iteration }}</td>
                                                            <td>{{ $template->name }}</td>
                                                            <td class="text-wrap">
                                                                {{ $template->template }}
                                                            </td>
                                                            <td>
                                                                <div class="dropdown">
                                                                    <button type="button"
                                                                        class="btn p-0 dropdown-toggle hide-arrow"
                                                                        data-bs-toggle="dropdown"><i
                                                                            class="bx bx-dots-vertical-rounded"></i></button>
                                                                    <div class="dropdown-menu">
                                                                        <a class="dropdown-item edit-link"
                                                                            data-id="{{ $template->id }}"
                                                                            href="javascript:void(0);"><i
                                                                                class="bx bx-edit-alt me-1"></i> Edit</a>
                                                                        <a class="dropdown-item delete-link"
                                                                            data-id="{{ $template->id }}"
                                                                            href="javascript:void(0);"><i
                                                                                class="bx bx-trash me-1"></i> Delete</a>
                                                                    </div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="navs-pills-top-profile" role="tabpanel">
                            <div class="col-12 col order-2 order-md-3 order-lg-2 mb-4">

                                <div class="row row-bordered g-10">
                                    <div class="col-md-4">
                                        <h5 class="card-header m-0 me-2 pb-3">Add New Bank Account</h5>
                                        <form method="POST" action="{{ route('sms.bankAccount.store') }}" id="bankForm">
                                            @csrf
                                            @method('POST')
                                            <div>
                                                <label for="defaultFormControlInput" class="form-label">Bank Name</label>
                                                <input type="text" name="bank_name" id="bank_name" class="form-control"
                                                    required>
                                            </div>
                                            <div>
                                                <label for="defaultFormControlInput" class="form-label">Account
                                                    Number</label>
                                                <input type="text" name="account_number" id="account_number" required
                                                    class="form-control">
                                            </div>
                                            <div class="d-none">
                                                <label for="defaultFormControlInput" class="form-label">
                                                    Status</label>
                                                <input type="text" name="account_status" id="account_status"
                                                    class="form-control">
                                            </div>
                                            <div class="form-check mt-3">
                                                <input class="form-check-input" type="checkbox" name='is_default'
                                                    value="1" id="defaultCheck1">
                                                <label class="form-check-label" for="defaultCheck1"> Default </label>
                                            </div>
                                            <button type="submit" class="btn btn-label-primary mx-0 my-2"
                                                id="create_btn_bank">Add</button>
                                        </form>

                                    </div>
                                    <div class="col-md-7">
                                        <h5 class="card-header m-0 me-2 pb-3">Bank Account</h5>
                                        <div class="table-responsive text-nowrap">
                                            <table class="table" id="bankSettingTable">
                                                <thead>
                                                    <tr>
                                                        <th>No.</th>
                                                        <th>Bank Name</th>
                                                        <th>Account Number</th>
                                                        <th>Default</th>
                                                        <th>Status</th>
                                                        <th>Actions</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="table-border-bottom-0">
                                                    @foreach ($bank_acc as $bank)
                                                        <tr>
                                                            <td>{{ $loop->iteration }}</td>
                                                            <td>{{ $bank->bank_name }}</td>
                                                            <td class="text-wrap">
                                                                {{ $bank->account_number }}
                                                            </td>
                                                            <td>{{ $bank->is_default ? 'default' : '-' }}</td>
                                                            <td>{{ $bank->status ? 'active' : '-' }}</td>
                                                            <td>
                                                                <div class="dropdown">
                                                                    <button type="button"
                                                                        class="btn p-0 dropdown-toggle hide-arrow"
                                                                        data-bs-toggle="dropdown"><i
                                                                            class="bx bx-dots-vertical-rounded"></i></button>
                                                                    <div class="dropdown-menu">
                                                                        <a class="dropdown-item edit-link"
                                                                            data-id="{{ $bank->id }}"
                                                                            href="javascript:void(0);"><i
                                                                                class="bx bx-edit-alt me-1"></i> Edit</a>
                                                                        <a class="dropdown-item delete-link"
                                                                            href="javascript:void(0);"><i
                                                                                class="bx bx-trash me-1"></i> Delete</a>
                                                                    </div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="navs-pills-top-sms" role="tabpanel">
                            <div class="col-12 col order-2 order-md-3 order-lg-2 mb-4">

                                <div class="row row-bordered g-10">
                                    <div class="col-md-4">
                                        <h5 class="card-header m-0 me-2 pb-3">Create an API key</h5>
                                        <form method="POST" action="{{ route('sms.sms_settings.store') }}"
                                            id="templateForm">
                                            @csrf
                                            @method('POST')
                                            <div>
                                                <label for="defaultFormControlInput" class="form-label">Name the API
                                                    key</label>
                                                <input type="text" name="key_name" id="api_key_name" required
                                                    class="form-control">
                                            </div>
                                            <div>
                                                <label for="defaultFormControlInput" class="form-label">Token</label>
                                                <input type="text" name="token" required class="form-control">
                                            </div>
                                            <button type="submit" class="btn btn-label-primary mx-0 my-2"
                                                id="create_btn">Create Key</button>
                                        </form>

                                    </div>
                                    <div class="col-md-7">
                                        <h5 class="card-header m-0 me-2 pb-3">API Key List</h5>
                                        @foreach ($sms_settings as $setting)
                                            <div class="bg-lighter rounded p-4 mb-6 position-relative">
                                                <div class="d-flex align-items-center mb-2">
                                                    <h5 class="mb-0 me-3">{{ $setting->name }}</h5>
                                                </div>
                                                <div class="d-flex align-items-center mb-2">
                                                    <p class="me-3 mb-0 fw-medium" id="token-text">{{ $setting->token }}
                                                    </p>
                                                    <span class="cursor-pointer" onclick="copyText()"><i
                                                            class="bx bx-copy"></i></span>
                                                </div>
                                                <span class="text-muted">Created on
                                                    {{ \Carbon\Carbon::parse($setting->created_at)->format('d M Y') }}
                                                </span>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
        <!-- Pills -->
    </div>
    @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
    <script src="sneat/assets/vendor/libs/jquery/jquery.js"></script>
    <script src="sneat/assets/vendor/libs/popper/popper.js"></script>
    <script>
        const updateRouteBase = `{{ route('sms.settings.update', ['setting' => ':settings']) }}`;
        const updateRouteBank = `{{ route('sms.bankAccount.update', ['bankAccount' => ':bankAccount']) }}`;
        document.addEventListener('DOMContentLoaded', () => {
            const table = document.querySelector('#templateSettingTable');
            const tableBank = document.querySelector('#bankSettingTable');

            table.addEventListener('click', (event) => {
                if (event.target.tagName === 'A' && event.target.classList.contains('edit-link')) {
                    event.preventDefault();

                    const dataId = event.target.getAttribute('data-id');
                    const tr = event.target.closest('tr');
                    const cells = tr.getElementsByTagName('td');

                    const rowData = Array.from(cells).map(cell => cell.textContent);
                    const template = rowData[2];
                    const name = rowData[1];

                    document.getElementById('template_message').innerHTML = template.trim();
                    document.getElementById('template_name').value = name.trim();

                    const button = document.getElementById('create_btn');
                    button.textContent = 'Update';

                    const form = document.getElementById('templateForm');
                    const methodInput = form.querySelector('input[name="_method"]');
                    methodInput.value = 'PUT';
                    const newRoute = updateRouteBase.replace(':settings', dataId);
                    form.action = newRoute;
                } else if (event.target.tagName === 'A' && event.target.classList.contains('delete-link')) {
                    event.preventDefault();
                    const dataId = event.target.getAttribute('data-id');

                    if (confirm('Are you sure you want to delete this item?')) {
                        const form = document.createElement('form');
                        form.method = 'POST';
                        form.action = `settings/${dataId}`;

                        const csrfInput = document.createElement('input');
                        csrfInput.type = 'hidden';
                        csrfInput.name = '_token';
                        csrfInput.value = document.querySelector('meta[name="csrf-token"]').getAttribute(
                            'content');
                        form.appendChild(csrfInput);

                        const methodInput = document.createElement('input');
                        methodInput.type = 'hidden';
                        methodInput.name = '_method';
                        methodInput.value = 'DELETE';
                        form.appendChild(methodInput);

                        document.body.appendChild(form);
                        form.submit();
                    }
                }
            });
            tableBank.addEventListener('click', (event) => {
                if (event.target.tagName === 'A' && event.target.classList.contains('edit-link')) {
                    event.preventDefault();

                    const dataId = event.target.getAttribute('data-id');
                    const tr = event.target.closest('tr');
                    const cells = tr.getElementsByTagName('td');

                    const rowData = Array.from(cells).map(cell => cell.textContent);
                    const accNumber = rowData[2];
                    const bankName = rowData[1];

                    document.getElementById('bank_name').value = bankName.trim();
                    document.getElementById('account_number').value = accNumber.trim();
                    if (rowData[3] == 'default') {
                        document.getElementById('defaultCheck1').checked = true;
                    } else {
                        document.getElementById('defaultCheck1').checked = false;
                    }

                    const button = document.getElementById('create_btn_bank');
                    button.textContent = 'Update';

                    const form = document.getElementById('bankForm');
                    const methodInput = form.querySelector('input[name="_method"]');
                    methodInput.value = 'PUT';
                    const newRoute = updateRouteBank.replace(':bankAccount', dataId);
                    form.action = newRoute;
                }
            });
        });

        function copyText() {
            var text = document.getElementById("token-text").innerText;
            var tempTextArea = document.createElement("textarea");
            tempTextArea.value = text;
            document.body.appendChild(tempTextArea);
            tempTextArea.select();
            tempTextArea.setSelectionRange(0, 99999);
            document.execCommand("copy");
            document.body.removeChild(tempTextArea);
            alert("Text copied: " + text);
        }
    </script>
@endsection