@extends('admin.layout')

@section('content')

<div>


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




    <div class="card shadow-sm mb-4">

        <div class="card-body">

            <div class="row">



                <div class="col-md-6 mb-3">

                    <label class="form-label">

                        Date

                    </label>

                    <input
                        type="date"
                        class="form-control"
                        value="{{ $call->date ?? '' }}"
                        readonly>

                </div>


                <div class="col-md-6 mb-3">

                    <label class="form-label">

                        Call Description

                    </label>

                    <textarea
                        class="form-control"
                        rows="4"
                        readonly>{{ $call->description ?? '' }}</textarea>

                </div>

            </div>

        </div>

    </div>

    <div class="card shadow-sm mb-4">

        <div class="card-body">

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

                @csrf


                <div class="row">

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

                        <input
                            type="hidden"
                            name="customer_id"
                            value="{{ $customer->id }}">

                    </div>

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


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

                <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 

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

                <tbody>
                </tbody>

            </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.addEventListener('DOMContentLoaded', function() {


        /*
        |--------------------------------------------------------------------------
        | Form
        |--------------------------------------------------------------------------
        */

        const form =
            document.getElementById('callForm');

        const submitBtn =
            document.getElementById('submitBtn');

        const resetBtn =
            document.getElementById('formResetBtn');


        /*
        |--------------------------------------------------------------------------
        | Required Fields
        |--------------------------------------------------------------------------
        */

        const requiredFields = {

            date: 'Date is required.',

            description: 'Call description is required.'

        };


        /*
        |--------------------------------------------------------------------------
        | Error Element
        |--------------------------------------------------------------------------
        */

        function getErrorElement(field) {

            return field
                .closest('.mb-3')
                .querySelector('.field-error');

        }


        /*
        |--------------------------------------------------------------------------
        | Clear Error
        |--------------------------------------------------------------------------
        */

        function clearError(field) {

            field.classList.remove('is-invalid');

            const error =
                getErrorElement(field);

            if (error) {

                error.innerText = '';

            }

        }


        /*
        |--------------------------------------------------------------------------
        | Show Error
        |--------------------------------------------------------------------------
        */

        function showError(field, message) {

            field.classList.add('is-invalid');

            const error =
                getErrorElement(field);

            if (error) {

                error.innerText = message;

            }

        }


        /*
        |--------------------------------------------------------------------------
        | Submit Validation
        |--------------------------------------------------------------------------
        */

        form.addEventListener('submit', function(e) {

            let isValid = true;


            /*
            | Clear Previous Errors
            */

            form
                .querySelectorAll('.field-error')
                .forEach(function(error) {

                    error.innerText = '';

                });


            form
                .querySelectorAll('.is-invalid')
                .forEach(function(field) {

                    field.classList.remove('is-invalid');

                });


            /*
            | Required Validation
            */

            Object.keys(requiredFields)
                .forEach(function(fieldName) {

                    const field =
                        form.querySelector(
                            `[name="${fieldName}"]`
                        );


                    if (
                        !field ||
                        field.value.trim() === ''
                    ) {

                        if (field) {

                            showError(
                                field,
                                requiredFields[fieldName]
                            );

                        }

                        isValid = false;

                    }

                });


            /*
            | Date Validation
            */

            const dateField =
                form.querySelector(
                    '[name="date"]'
                );


            if (
                dateField &&
                dateField.value !== ''
            ) {

                const selectedDate =
                    new Date(
                        dateField.value
                    );

                const today =
                    new Date();

                today.setHours(
                    0,
                    0,
                    0,
                    0
                );


                if (selectedDate > today) {

                    showError(
                        dateField,
                        'Date cannot be a future date.'
                    );

                    isValid = false;

                }

            }


            /*
            | Description Validation
            */

            const description =
                form.querySelector(
                    '[name="description"]'
                );


            if (
                description &&
                description.value.trim() !== '' &&
                description.value.trim().length < 3
            ) {

                showError(
                    description,
                    'Call description must be at least 3 characters.'
                );

                isValid = false;

            }


            /*
            | Stop Submit
            */

            if (!isValid) {

                e.preventDefault();

                const firstError =
                    form.querySelector(
                        '.is-invalid'
                    );


                if (firstError) {

                    firstError.scrollIntoView({

                        behavior: 'smooth',

                        block: 'center'

                    });


                    setTimeout(function() {

                        firstError.focus();

                    }, 400);

                }

                return;

            }


            /*
            | Processing
            */

            submitBtn.disabled = true;

            resetBtn.disabled = true;


            submitBtn.innerHTML = `

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

                Processing...

            `;

        });


        /*
        |--------------------------------------------------------------------------
        | Remove Error While Typing
        |--------------------------------------------------------------------------
        */

        form
            .querySelectorAll(
                'input, textarea'
            )
            .forEach(function(field) {

                field.addEventListener(
                    'input',
                    function() {

                        if (
                            field.value.trim() !== ''
                        ) {

                            clearError(field);

                        }

                    }
                );


                field.addEventListener(
                    'change',
                    function() {

                        if (
                            field.value.trim() !== ''
                        ) {

                            clearError(field);

                        }

                    }
                );

            });


        /*
|--------------------------------------------------------------------------
| Reset
|--------------------------------------------------------------------------
*/

        resetBtn.addEventListener('click', function() {

            form.reset();

            form
                .querySelectorAll('.field-error')
                .forEach(function(error) {

                    error.innerText = '';

                });


            form
                .querySelectorAll('.is-invalid')
                .forEach(function(field) {

                    field.classList.remove('is-invalid');

                });


            submitBtn.disabled = false;

            resetBtn.disabled = false;


            submitBtn.innerHTML = `

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

        Add Call

    `;

        });
        /*
        |--------------------------------------------------------------------------
        | DataTable
        |--------------------------------------------------------------------------
        */

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

                processing: true,

                serverSide: true,

                lengthChange: false,

                searching: true,

                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,

                        className: 'text-center'

                    },

                    {
                        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();

            }
        );


    });
</script>

@endsection