@extends('Admin.layout')

@section('content')
<h5>Reminder</h5>
<div class="card p-3">
    <h6>Reminder</h6>

    <form action="{{route('add_reminder_form')}}" method="POST" id="reminderForm">
        @csrf
        <div class="row g-2">
            <div class="col-lg-6 mb-2">
                <label class="form-label">Title <span class="text-danger">*</span> </label>
                <input type="text" name="title"
                    value="{{ old('title') }}"
                    class="form-control"
                    placeholder="Enter Title">
                @error('title')
                <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>

            <div class="col-lg-6 mb-2">
                <label class="form-label">Date <span class="text-danger">*</span> </label>
                <input type="date"
                    name="remind_date"
                    value="{{ old('remind_date') }}"
                    class="form-control">
                @error('remind_date')
                <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>
            <div class="col-lg-6 mb-2">
                <label class="form-label">Description <span class="text-danger">*</span> </label>
                <input type="text"
                    name="description"
                    value="{{ old('description') }}"
                    class="form-control"
                    placeholder="Enter Message">
                @error('description')
                <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>
            <div class="col-lg-6 mb-2">
                <label class="form-label">To <span class="text-danger">*</span> </label>
                <select name="type" class="form-select">
                    <option>Select</option>
                    <option value="me" {{ old('type')=='me'?'selected':'' }}>Me</option>
                    <option value="all" {{ old('type')=='all'?'selected':'' }}>All</option>
                </select>
                @error('type')
                <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>
        </div>

        <div class="form-action d-flex justify-content-center mt-3">
            <button type="reset" class="btn btn-label-secondary me-4">Discard</button>
            <button type="submit" id="submitReminder" class="btn btn-primary me-4">Submit</button>
        </div>

    </form>
</div>


<div class="card p-1 mt-4">
    <div class="row mb-3 align-items-center p-3 g-2">
        <div class="col-1">
            <select id="pageLength" class="form-select">
                <option value="10"> 10</option>
                <option value="25"> 25</option>
                <option value="50"> 50</option>
                <option value="100"> 100</option>
            </select>
        </div>

        <div class="col-md-3 ms-auto">
            <input type="text" id="toDate" class="form-control" placeholder="Search">
        </div>
    </div>


    <div class="table-responsive pt-0 pb-2">
        <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">
            <div class="justify-content-between dt-layout-table">
                <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                    <table class="table" id="usersTable">
                        <thead>
                            <tr>
                                <th>Sno</th>
                                <th class="text-nowrap">Title</th>
                                <th>Date</th>
                                <th>Description</th>
                                <th>To</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>
</div>

<!-- delete -->
<div class="modal fade" id="deleteReminder" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to delete?</p>
            <form id="DeleteForm" method="POST" action="{{ route('delete_reminder') }}">
                @csrf
                <input type="hidden" name="id" id="reminder_id">
                <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                    <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" id="submit_delete" class="btn btn-danger p-3 ms-2 fw-semibold">
                        Yes, Sure
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script>
    //double tap prevention
    document.getElementById('reminderForm').addEventListener('submit', function() {
        const btn = document.getElementById('submitReminder');
        btn.disabled = true;
        btn.innerText = 'Processing...';
    });


    //delete
    function setDeleteId(button) {
        document.getElementById('reminder_id').value = button.getAttribute('data-id');
    }

    document.getElementById('DeleteForm').addEventListener('submit', function() {
        const btn = document.getElementById('submit_delete');
        btn.disabled = true;
        btn.innerText = 'Deleting...';
    });
</script>

<script>
    $(document).ready(function() {

    var table = $('#usersTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('reminder_data') }}",

        pageLength: 10,
        searching: true,
        paging: true,
        info: true,
        lengthChange: false,
        ordering: true,

        columns: [
            {
                data: 'DT_RowIndex',
                orderable: false,
                searchable: false
            },

            {
                data: 'title',
                name: 'title'
            },

            {
                data: 'remind_date',
                name: 'remind_date'
            },

            {
                data: 'description',
                name: 'description'
            },

            {
                data: 'type',
                orderable: false,
                searchable: false
            },

            {
                data: 'action',
                orderable: false,
                searchable: false
            }
        ]
    });

    // Custom search
    $('#toDate').on('keyup change', function() {
        table.search(this.value).draw();
    });

});
</script>
@endsection