@extends('layouts.admin.index')

@section('content')
    <div class="page-header page-header-light shadow">
        <div class="page-header-content d-lg-flex">
            <div class="d-flex">
                <h4 class="page-title mb-0">
                    Home - <span class="fw-normal">Refund Management</span>
                </h4>

                <a href="#page_header"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>

        <div class="page-header-content d-lg-flex border-top">
            <div class="d-flex">
                <div class="breadcrumb py-2">
                    <a href="{{ route('admin.dashboard') }}" class="breadcrumb-item"><i class="ph-house"></i></a>
                    <a href="{{ route('admin.dashboard') }}" class="breadcrumb-item">Home</a>
                    <span class="breadcrumb-item active">Refund Management</span>
                </div>

                <a href="#breadcrumb_elements"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>
    </div>

    <div class="content">

        @include('error-success')

        <div class="card">

            <div class="card-body">
                <div class="row">
                    <div class="col-4">
                        <label class="col-form-label">Select Customer:</label>
                        <select id="customer-select" class="form-control multiselect" name="customer_id"
                            data-enable-filtering="true" data-enable-case-insensitive-filtering="true" required>
                            <option value="">Select</option>
                            @foreach ($customers as $customer)
                                <option value="{{ $customer->id }}"
                                    label="{{ $customer->name . ' (' . $customer->email . ')' }}"
                                    {{ $customerId == $customer->id ? 'selected' : '' }}>
                                    {{ $customer->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-4">
                        <label class="col-form-label">Select Advisor:</label>
                        <select id="advisor-select" class="form-control multiselect" name="advisor_id"
                            data-enable-filtering="true" data-enable-case-insensitive-filtering="true" required>
                            <option value="">Select</option>
                            @foreach ($advisors as $advisor)
                                <option value="{{ $advisor->id }}"
                                    label="{{ $advisor->name . ' (' . $advisor->email . ')' }}"
                                    {{ $advisorId == $advisor->id ? 'selected' : '' }}>
                                    {{ $advisor->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-1">
                        <label class="col-form-label" style="color: transparent;">SSSSSSSSS</label>
                        <button type="button" class="btn btn-primary" id="search-refund-booking">Search</button>
                    </div>
                    <div class="col-1">
                        <label class="col-form-label" style="color: transparent;">SSSSSSSSS</label>
                        <a href="#" id="cancel-search" class="btn btn-primary">Cancel</a>
                    </div>
                    {{-- <div class="text-center d-flex justify-content-center w-100 mt-1">
                        <label class="btn btn-theme mr-1 text-white">
                            Upload<input type="file" name="image" id="profile_picture" accept="image/*"
                                style="width: 0px;height: 0px;overflow: hidden;">
                        </label>
                        <label class="btn btn-secondary" id="remove-profile-pic">
                            Remove
                        </label>
                    </div> --}}
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-bordered" id="refund-list-table">
                    <thead>
                        <tr>
                            <th>Booking ID</th>
                            <th>Advisor Name</th>
                            <th>Customer Name</th>
                            <th>Session Type</th>
                            <th>Session Status</th>
                            <th>Total Amount</th>
                            <th>Session Minute</th>
                            <th>Booking Minute</th>
                            <th>Created On</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('style')
    <style>
        .form-control-feedback-icon i.ph-magnifying-glass.text-muted {
            display: none;
        }

        .badge-secondary {
            background-color: #6B6F82;
        }

        .badge,
        .badge[class*=badge-] a {
            color: #FFF;
        }
    </style>
@endsection

@section('script')
        <script>
            $(document).ready(function() {
    
                var table = $('#refund-list-table').DataTable({
                    buttons: {
                        dom: {
                            button: {
                                className: 'btn btn-light'
                            }
                        },
                        buttons: [{
                                extend: 'copy'
                            },
                            {
                                extend: 'csv'
                            },
                            {
                                extend: 'excel'
                            },
                            {
                                extend: 'pdf'
                            },
                            {
                                extend: 'print'
                            }
                        ]
                    },
                    responsive: true,
                    processing: true,
                    serverSide: true,
                    order: [[8, 'desc']],
                    ajax: '{{ route('refund.list') }}',
                    columns: [
                        {
                            data: 'id',
                            name: 'id'
                        },
                        {
                            data: 'advisor_name',
                            name: 'advisor_name',
                        },
                        {
                            data: 'user_name',
                            name: 'user_name',
                            render: function(data, type, row) {
                                let deletedStatus = row.deleted_at ?
                                    '<span style="color:red;">(Deleted)</span>' : '';
                                return data + ' ' + deletedStatus;
                            }
                        },
                        {
                            data: 'type',
                            name: 'type',
                            render: function(data, type, row){
                                return `<span style='text-transform:capitalize'>${data} <span>`
                            }
                        },
                        {
                            data: 'status',
                            name: 'status',
                            render : function(data,type,row ){
                                    if (row.status == 0){
                                        return `<span class="badge bg-warning">Pending</span>`;
                                    }else if(row.status == 1){
                                        return `<span class="badge bg-success">Completed</span>`;
    
                                    }else{
                                        return `<span class="badge bg-danger">Rejected</span>`;
                                    }
                            }
                        },
                        {
                            data: 'total_amount',
                            name: 'total_amount',
                            orderable:false,
                            searchable:false
                        },
                        {
                            data: 'session_minutes',
                            name: 'session_minutes',
                        },
                        {
                            data: 'session_duration',
                            name: 'session_duration',
                        },
                        {
                            data: 'created_at',
                            name: 'created_at'
                        },
                  
                        {
                            data: null,
                            name: 'actions',
                            orderable: false,
                            searchable: false,
                            render: function(data, type, row) {
                                return `<span class="badge badge-secondary refund-btn" style="cursor:pointer;"
                                            data-booking_id="${row.id}"
                                            data-customer_id="${row.user_id}">Refund</span>`;
                            }
                        }
                    ]
                });

                $("body #search-refund-booking").on("click", function() {
                    var customerId = $('#customer-select').val();
                    var advisorId = $("#advisor-select").val();
                        var url = "{{ route('refund.list') }}" + 
                                    "?customerId=" + customerId +
                                    "&advisorId=" + advisorId;
                        table.ajax.url(url).load();
                        table.ajax.reload();
                    
                })
                $('#cancel-search').on('click',function(e){
                        e.preventDefault();
                        $('.multiselect').each(function() {
                            $(this).multiselect('destroy');
                            $(this).val($(this).find('option:first').val()).trigger('change');
                            $(this).multiselect();  
                        });
                        table.ajax.url("{{ route('refund.list') }}").load();
                })

                $("body").on('click', '.refund-btn', function() {

                var booking_id = $(this).data('booking_id');

                console.log(booking_id);

                Swal.fire({

                    title: "Are you sure that you want to refund this session?",

                    //text: "You will not be able to recover record!",

                    showCancelButton: true,

                    confirmButtonColor: "#3085d6",

                    confirmButtonText: "Yes, refund it!",

                    cancelButtonText: "No, cancel please!",


                }).then((result) => {

                    if (result.value) {
                        $.ajax({
                            url: "{{ route('make.refund') }}",
                            type: 'POST',
                            dataType: 'JSON',
                            data: {
                                booking_id: booking_id,
                                _token: token
                            },
                            success: function(response, textStatus, jqXHR) {
                                if (response.success == true) {

                                    Swal.fire("Refunded", "Refund Successfull.",
                                        "success");
                                        table.ajax.url("{{ route('refund.list') }}").load();

                                } else {
                                    Swal.fire("Sorry",
                                        "Insufficient balance in advisor wallet",
                                        "error");
                                }
                            },
                            error: function(jqXHR, textStatus, errorThrown) {
                                showToast(
                                    'Oops! some error occured, please try again', {
                                        type: 'error',
                                        icon: 'error'
                                    });
                                }
                            });

                            } else {
                                Swal.fire("Cancelled", "Refund Cancelled", "error");
                            }

                            });

                            })
                $('#refund-list-table_filter').hide();
                $('#refund-list-table_length').hide();
                $('#searchBtn').on('click', function() {
                    table.search($('#searchTerm').val()).draw(); // Use DataTable's search method
                });
                $('#searchTerm').on('keyup', function() {
                    table.search(this.value).draw(); // Use DataTable's search method
                });
          
            });
        </script>
@endsection