@extends('admin.layout')

@section('content')

<style>
    .dt-search {
        display: none;
    }
</style>


<div>

    {{-- ==========================================================
        Page Header
    =========================================================== --}}
    <div class="row align-items-center justify-content-between mb-3 mt-3">

        <div class="col-auto">

            <h5>

                <button
                    type="button"
                    class="btn btn-icon bg-white me-2"
                    style="box-shadow: 0px 9px 12px -2px #66328E1F;">

                    <a href="{{ route('admin.customer_list') }}">

                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="#000"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round">

                            <path
                                stroke="none"
                                d="M0 0h24v24H0z"
                                fill="none" />

                            <path d="M15 6l-6 6l6 6" />

                        </svg>

                    </a>

                </button>

                Call History

            </h5>

        </div>

    </div>



    {{-- ==========================================================
        Add Call History
    =========================================================== --}}
    <div class="card shadow-sm mb-4">

        <div class="card-body">

            <form
                id="callForm"
                action="{{ route('store_call_history', $customer->id) }}"
                method="POST">

                @csrf


                <div class="row">


                    {{-- Customer --}}
                    <div class="col-md-4 mb-3">

                        <label class="form-label fw-semibold">

                            Customer

                        </label>

                        <input
                            type="text"
                            class="form-control"
                            value="{{ $customer->name }}"
                            readonly>

                    </div>



                    {{-- Date --}}
                    <div class="col-md-4 mb-3">

                        <label class="form-label fw-semibold">

                            Date
                            <span class="text-danger">*</span>

                        </label>

                        <input
                            type="date"
                            name="date"
                            id="date"
                            class="form-control @error('date') is-invalid @enderror"
                            value="{{ old('date', date('Y-m-d')) }}"
                            max="{{ date('Y-m-d') }}"
                            required>

                        <small class="text-danger field-error"></small>

                        @error('date')

                        <small class="text-danger">
                            {{ $message }}
                        </small>

                        @enderror

                    </div>



                    {{-- Description --}}
                    <div class="col-md-4 mb-3">

                        <label class="form-label fw-semibold">

                            Call Description
                            <span class="text-danger">*</span>

                        </label>

                        <textarea
                            name="description"
                            id="description"
                            rows="3"
                            class="form-control @error('description') is-invalid @enderror"
                            placeholder="Enter call description..."
                            required>{{ old('description') }}</textarea>

                        <small class="text-danger field-error"></small>

                        @error('description')

                        <small class="text-danger">
                            {{ $message }}
                        </small>

                        @enderror

                    </div>

                </div>



                {{-- Buttons --}}
                <div class="text-center mt-4">

                    <button
                        type="reset"
                        id="formResetBtn"
                        class="btn btn-secondary px-5 ms-2">

                        Reset

                    </button>


                    <button
                        type="submit"
                        id="submitBtn"
                        class="btn btn-primary px-5">

                        <i class="ti tabler-device-floppy me-1"></i>

                        Add Call

                    </button>

                </div>

            </form>

        </div>

    </div>



    {{-- ==========================================================
        Call History Table
    =========================================================== --}}
    <div class="card p-0">

        {{-- Toolbar --}}
        <div class="row mb-3 align-items-center p-3 g-2">


            {{-- Page Length --}}
            <div class="col-auto">

                <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>

                    <option value="-1">
                        All
                    </option>

                </select>

            </div>



            {{-- Search --}}
            <div class="col-lg-auto ms-auto col-12">

                <input
                    type="text"
                    id="customSearch"
                    class="form-control"
                    placeholder="Search..."
                    style="width:263px;">

            </div>

        </div>



        {{-- Table --}}
        <div class="table-responsive pt-0 pb-2">

            <table
                class="table table-bordered"
                id="callHistoryTable">

                <thead>

                    <tr>

                        <th>S.No</th>

                        <th>Date</th>

                        <th>Description</th>

                    </tr>

                </thead>

            </table>

        </div>

    </div>

</div>



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


{{-- ==========================================================
    DataTables
=========================================================== --}}
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>



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


        // =========================================================
        // DataTable
        // =========================================================

        let table = $('#callHistoryTable').DataTable({

            processing: true,

            serverSide: true,

            lengthChange: false,

            ajax: {
                url: "{{ route('call_history_data', ['customer' => $customer->id]) }}",

                type: "GET",

                error: function(xhr) {

                    console.log(
                        'Call History DataTable Error:',
                        xhr.responseText
                    );

                }
            },


            columns: [

                {
                    data: 'DT_RowIndex',

                    name: 'DT_RowIndex',

                    orderable: false,

                    searchable: false
                },


                {
                    data: 'date',

                    name: 'date',

                    defaultContent: ''
                },


                {
                    data: 'description',

                    name: 'description',

                    defaultContent: ''
                }

            ]

        });



        // =========================================================
        // Custom Search
        // =========================================================

        $('#customSearch').on('keyup', function() {

            table
                .search(this.value)
                .draw();

        });



        // =========================================================
        // Page Length
        // =========================================================

        $('#pageLength').on('change', function() {

            table
                .page
                .len($(this).val())
                .draw();

        });



        // =========================================================
        // Form Validation
        // =========================================================

        $('#callForm').on('submit', function(e) {

            let date =
                $('#date').val();

            let description =
                $('#description').val().trim();


            $('.field-error').text('');

            $('.is-invalid').removeClass('is-invalid');


            let valid = true;


            // Date

            if (date === '') {

                $('#date')
                    .addClass('is-invalid')
                    .siblings('.field-error')
                    .text('Date is required.');

                valid = false;

            }


            // Description

            if (description === '') {

                $('#description')
                    .addClass('is-invalid')
                    .siblings('.field-error')
                    .text('Call description is required.');

                valid = false;

            }


            if (!valid) {

                e.preventDefault();

                return false;

            }


            // Disable buttons

            $('#submitBtn')
                .prop('disabled', true);

            $('#formResetBtn')
                .prop('disabled', true);


            $('#submitBtn').html(`

            <span
                class="spinner-border spinner-border-sm me-1"
                role="status">
            </span>

            Processing...

        `);

        });



        // =========================================================
        // Remove Error
        // =========================================================

        $('#date, #description').on(
            'input change',
            function() {

                if ($(this).val().trim() !== '') {

                    $(this)
                        .removeClass('is-invalid')
                        .siblings('.field-error')
                        .text('');

                }

            }
        );



        // =========================================================
        // Form Reset
        // =========================================================

        $('#formResetBtn').on('click', function() {

            setTimeout(function() {

                $('.field-error').text('');

                $('.is-invalid')
                    .removeClass('is-invalid');

                $('#submitBtn')
                    .prop('disabled', false)
                    .html(`

                    <i class="ti tabler-device-floppy me-1"></i>

                    Add Call

                `);

                $('#formResetBtn')
                    .prop('disabled', false);

            }, 50);

        });


    });
</script>

@endsection