@extends('admin.layout.dashboard-template')

@section('content')

<div class="db-info-wrap db-package-wrap">

    <div class="dashboard-box table-opp-color-box">

        <h4>Service Applications</h4>

        @if(\Session::get('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <div class="alert-body">
                {{ \Session::get('success') }}
            </div>
            <button type="button"
                class="btn-close"
                data-bs-dismiss="alert"></button>
        </div>
        @endif

        @if(\Session::get('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <div class="alert-body">
                {{ \Session::get('error') }}
            </div>
            <button type="button"
                class="btn-close"
                data-bs-dismiss="alert"></button>
        </div>
        @endif

        <div class="table-responsive">

            <table class="table booking dataTable no-footer"
                id="booking">

                <thead>
                    <tr>
                        <th>Sl.No</th>
                        <th>Customer Name</th>
                        <th>Phone Number</th>
                        <th>Service</th>
                        <th>Agent</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>

                <tbody></tbody>

            </table>

        </div>

    </div>

</div>


{{-- =========================
STATUS CHANGE MODAL
========================= --}}
<div class="modal fade"
    id="statusModal"
    tabindex="-1">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            <div class="modal-header bg-primary text-white">

                <h5 class="modal-title">
                    Change Enquiry Status
                </h5>

                <button type="button"
                    class="btn-close btn-close-white"
                    data-bs-dismiss="modal"></button>

            </div>

            <form id="statusForm">

                @csrf

                <div class="modal-body">

                    <input type="hidden"
                        name="id"
                        id="booking_id">

                    {{-- STATUS --}}
                    <div class="form-group mb-3">

                        <label class="fw-bold">
                            Status
                        </label>

                        <select name="status"
                            id="booking_status"
                            class="form-control">

                            <option value="">Select Status</option>



                            <option value="Approved">
                                Approved
                            </option>

                            <option value="Completed">
                                Payment Transferred (Completed)
                            </option>

                            <option value="Declined">
                                Declined
                            </option>

                        </select>

                    </div>

                    {{-- DECLINE REASON --}}
                    <div class="form-group mb-3"
                        id="decline_reason_div"
                        style="display:none;">

                        <label class="fw-bold">
                            Decline Reason
                        </label>

                        <textarea name="reason"
                            id="reason"
                            class="form-control"
                            rows="3"
                            placeholder="Enter decline reason"></textarea>

                    </div>


                    {{-- APPROVED COMMISSION --}}
                    {{-- APPROVED COMMISSION --}}
                    {{-- APPROVED COMMISSION --}}
                    <div id="approved_section" style="display:none;">

                        <div class="alert alert-info">

                            Add commission details while approving.

                        </div>

                        {{-- COMMISSION TYPE --}}
                        <div class="form-group mb-3">

                            <label class="fw-bold">
                                Commission Type
                            </label>

                            <select name="approved_commission_type"
                                id="approved_commission_type"
                                class="form-control">

                                <option value="">
                                    Select Type
                                </option>

                                <option value="fixed">
                                    Fixed Amount
                                </option>

                                <option value="percentage">
                                    Percentage Based
                                </option>

                                <option value="contact">
                                    Please Contact Help Desk
                                </option>
                            </select>

                        </div>


                        {{-- AMOUNT --}}
                        <div class="form-group mb-3"
                            id="commission_amount_div">

                            <label class="fw-bold">
                                Commission Value
                            </label>

                            <input type="number"
                                step="0.01"
                                min="0"
                                name="approved_commission"
                                id="approved_commission"
                                class="form-control"
                                placeholder="Enter value">

                            <small id="commission_text"
                                class="text-muted">

                                Example: 500

                            </small>

                        </div>

                    </div>

                </div>

                <div class="modal-footer">

                    <button type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal">

                        Cancel

                    </button>

                    <button type="submit"
                        class="btn btn-success">

                        Update Status

                    </button>

                </div>

            </form>

        </div>

    </div>

</div>


<script>
    // =========================
    // DATATABLE
    // =========================
    $(function() {

        $('.table').DataTable({

            processing: true,

            serverSide: true,

            ajax: "{{ route('admin.get-enquiry') }}",

            columns: [

                {
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },

                {
                    data: 'customer_name',
                    name: 'customer_name'
                },

                {
                    data: 'phone_number',
                    name: 'phone_number'
                },

                {
                    data: 'service',
                    name: 'service'
                },

                {
                    data: 'agent',
                    name: 'agent'
                },

                {
                    data: 'status',
                    name: 'status'
                },

                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }

            ]

        });




        // =========================
        // DELETE ENQUIRY
        // =========================
        $(document).on('click', '#getBookingDeleteID', function(e) {

            e.preventDefault();

            let answer = confirm(
                "Are you sure you want to delete this item?"
            );

            if (!answer) return;

            let id = $(this).data('id');

            $.ajax({

                url: "{{ route('admin.delete-enquiry') }}",

                method: "GET",

                data: {
                    id: id
                },

                success: function(result) {

                    $('.table').DataTable().ajax.reload();

                    if (result == 1) {

                        alert('Service deleted successfully');

                    } else {

                        alert('Something went wrong');

                    }

                }

            });

        });


        // =========================
        // OPEN STATUS MODAL
        // =========================
        // =========================
        // OPEN STATUS MODAL
        // =========================
        $(document).on('click', '.changeStatusBtn', function() {

            let id = $(this).data('id');

            let status = $(this).data('value');

            let commissionType = $(this).data('commission-type');

            let commissionValue = $(this).data('commission-value');

            $('#booking_id').val(id);

            $('#booking_status').val(status).trigger('change');


            // =========================
            // AUTO FILL APPROVED VALUES
            // =========================
            $('#approved_commission_type')
                .val(commissionType)
                .trigger('change');


            // CONTACT TYPE
            if (commissionType == 'contact') {

                $('#approved_commission').val('');

                $('#commission_amount_div').hide();

                $('#commission_text').text(
                    'Please contact agent help desk for payment commission details'
                );

            } else {

                $('#commission_amount_div').show();

                $('#approved_commission').val(commissionValue);

            }


            // FIXED
            if (commissionType == 'fixed') {

                $('#commission_text').text(
                    'Fixed Amount Example: 500'
                );

            }

            // PERCENTAGE
            else if (commissionType == 'percentage') {

                $('#commission_text').text(
                    'Percentage Example: 10%'
                );

            }

            $('#statusModal').modal('show');

        });

        // =========================
        // STATUS CHANGE
        // =========================
        $('#booking_status').on('change', function() {

            let status = $(this).val();

            if (status == 'Declined') {

                $('#decline_reason_div').show();

                $('#approved_section').hide();

            } else if (status == 'Approved') {

                $('#approved_section').show();

                $('#decline_reason_div').hide();

            } else {

                $('#decline_reason_div').hide();

                $('#approved_section').hide();

            }

        });


        // =========================
        // UPDATE STATUS AJAX
        // =========================
        $('#statusForm').submit(function(e) {

            e.preventDefault();

            $.ajax({

                url: "{{ route('admin.change-enquiry-status') }}",

                method: "POST",

                data: $(this).serialize(),

                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },

                success: function(response) {

                    if (response.status == true) {

                        $('#statusModal').modal('hide');

                        $('.table').DataTable().ajax.reload();

                        alert(response.message);
                        $(".alert-success").text(response.message);
                    } else {

                        alert(response.message);
                        $(".alert-danger").text(response.message);
                    }

                },

                error: function(xhr) {

                    alert('Something went wrong');

                }

            });

        });
    });

    // ===================================
    // COMMISSION TYPE CHANGE
    // ===================================
    // ===================================
    // COMMISSION TYPE CHANGE
    // ===================================
    $('#approved_commission_type').on('change', function() {

        let type = $(this).val();

        $('#commission_amount_div').show();

        // FIXED
        if (type == 'fixed') {

            $('#commission_text').text(
                'Enter final commission amount. Example: 500'
            );

            $('#approved_commission')
                .attr('placeholder', '500');
        }

        // PERCENTAGE
        else if (type == 'percentage') {

            $('#commission_text').text(
                'Enter final calculated commission amount manually. Example: 20000'
            );

            $('#approved_commission')
                .attr('placeholder', '20000');
        }

        // CONTACT
        else if (type == 'contact') {

            $('#commission_text').text(
                'After contacting help desk, enter final commission amount manually'
            );

            $('#approved_commission')
                .attr('placeholder', '5000');
        }

    });
</script>

@endsection