@extends('admin.layouts.layout')
@section('title', 'Dispute Management')
@section('content')


    <div class="w-[full flex flex-col gap-3 justify-between">
        <div class="grid sm:grid-cols-2 xl:grid-cols-3 grid-cols-1 xldesk:grid-cols-4 gap-3">


            <div class="bg-white max-h-[160px]  p-3 w-full rounded-[10px] border border-[#DADADA] shadow bg-no-repeat bg-cover"
                style="background-image: url('{{ asset('newsites/admin/images/card-bg-1.png') }}');">
                <div class="flex items-center justify-between mb-0">
                    <div
                        class="bg-[#133754] border border-[#EAEAEA] rounded-[5px] px-[10px] py-[10px]   flex justify-center">
                        <img src="{{ asset('newsites/admin/images/user-icon.png') }}" alt="images" />
                    </div>

                </div>
                <p class="text-sm text-[#313131] Poppins mb-0">Total Disputes</p>
                <p class="text-[28px]  text-[#133754] Poppins font-semibold  mb-0">{{ $totalDisputes ?? 0 }}</p>
                <p class="text-sm Poppins-medium text-[#3F3F3F]">Total disputes raised on platform</p>
            </div>


            <div class="bg-white max-h-[160px] p-3 w-full rounded-[10px] border border-[#DADADA] shadow bg-no-repeat bg-cover"
                style="background-image: url('{{ asset('newsites/admin/images/card-bg-2.png') }}');">
                <div class="flex items-center justify-between mb-0">
                    <div
                        class="bg-[#F4C701] border border-[#EAEAEA] rounded-[5px] px-[10px] py-[10px]   flex justify-center">
                        <img src="{{ asset('newsites/admin/images/payment-icon.png') }}" alt="images" />
                    </div>


                </div>
                <p class="text-sm text-[#313131] Poppins mb-0">Open Disputes</p>
                <p class="text-[28px]  text-[#133754] Poppins font-semibold  mb-0">{{ $totalOpenDisputes ?? 0 }}</p>
                <p class="text-sm Poppins-medium text-[#3F3F3F]">Open Disputes</p>
            </div>

            <div class="bg-white max-h-[160px] p-3 w-full rounded-[10px] border border-[#DADADA] shadow bg-no-repeat bg-cover"
                style="background-image: url('{{ asset('newsites/admin/images/card-bg-3.png') }}');">
                <div class="flex items-center justify-between mb-0">
                    <img src="{{ asset('newsites/admin/images/card-payout-icon-3.png') }}" />
                </div>
                <p class="text-sm text-[#313131] Poppins mb-0">Resolved Disputes</p>
                <p class="text-[28px]  text-[#133754] Poppins font-semibold  mb-0">{{ $totalResolvedDisputes ?? 0 }}</p>
                <p class="text-sm Poppins-medium text-[#3F3F3F]">Disputes with final decisions</p>
            </div>
            <div class="bg-white max-h-[160px] p-3 w-full rounded-[10px] border border-[#DADADA] shadow bg-no-repeat bg-cover"
                style="background-image: url('{{ asset('newsites/admin/images/card-bg-red.png') }}');">
                <div class="flex items-center justify-between mb-0">
                    <div
                        class="bg-[#D81C1F] border border-[#EAEAEA] rounded-[5px] px-[10px] py-[10px]   flex justify-center">
                        <img src="{{ asset('newsites/admin/images/session-icon-white.png') }}" alt="images" />
                    </div>


                </div>
                <p class="text-sm text-[#313131] Poppins mb-0">High-Risk Disputes</p>
                <p class="text-[28px]  text-[#133754] Poppins font-semibold  mb-0">{{ $totalHighRiskDisputes ?? 0 }}</p>
                <p class="text-sm Poppins-medium text-[#3F3F3F]">Disputes involving high-value payments</p>
            </div>
        </div>
        <div>

            <div class="flex flex-col 2xl:flex-row justify-between gap-4 mb-6 mt-3">

                <!-- Left Buttons -->
                <div class="flex flex-wrap gap-2 w-full 2xl:w-auto">

                    @include('admin.components.disputeStatusBtns')

                </div>

                <!-- Right Filters -->
                <form action="{{ route('admin.disputeManagement') }}">
                    <div class="flex flex-col sm:flex-row gap-3 w-full 2xl:w-auto">

                        <div class="relative w-full sm:w-[248px]">
                            
                            <select name="status" onchange="this.form.submit()"
                                class="appearance-none w-full border border-[#EEEEEE] py-2.75 outline-0 rounded-md Poppins text-[14px] px-4 pr-10 text-[#4C4C4C] bg-white">

                                <option value="">Dispute Status</option>
                                <option value="new" {{ request('status') == 'new' ? 'selected' : '' }}>New</option>
                                <option value="under-review" {{ request('status') == 'under-review' ? 'selected' : '' }}>
                                    Under Review</option>
                                <option value="resolved" {{ request('status') == 'resolved' ? 'selected' : '' }}>Resolved
                                </option>

                            </select>

                            <div class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-500">
                                <img src="{{ asset('newsites/admin/images/select-arrow.png') }}" />
                            </div>
                        </div>

                        <div class="relative w-full 2xl:w-[412px]">
                            <div class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                                <i class="fa-solid fa-magnifying-glass text-[#9CA3AF]"></i>
                            </div>

                            <input type="text" name="search" value="{{request('search')}}"
                                placeholder="Search by Session ID, Tutor name, Student name"
                                class="border border-[#EEEEEE] placeholder:text-[#4C4C4C] rounded-md pl-10 pr-4 py-2.75 text-[#4C4C4C] Poppins text-[12px] w-full focus:outline-none" />

                        </div>

                    </div>
                </form>

            </div>

            <div class="grid xldesk:grid-cols-4 xl:grid-cols-3  sm:grid-cols-2 grid-cols-1    gap-2">
                @foreach ($disputes as $dispute)
                    <div
                        class="dispute_section w-full  bg-white border border-[#D8DADF] rounded-[12px] overflow-hidden shadow-sm">

                        <div class="py-2 px-4 flex justify-between items-center border-b border-gray-100">
                            <h2 class="text-[#133754] text-[16px] Poppins font-semibold  ">{{ $dispute->title }}</h2>
                            @if ($dispute->status == 'pending')
                                <div class="relative ">
                                        {{-- <span class="appearance-none w-[143px] bg-[#F4C701] text-black text-sm font-medium py-1.5 px-4  rounded-[5px] focus:outline-none">New</span> --}}
                                    <select id="status" data-id="{{ $dispute->id }}"
                                        class="status appearance-none w-[143px] bg-[#F4C701] text-black text-sm font-medium py-1.5 px-4 pr-8 rounded-[5px] focus:outline-none">
                                        <option>New</option>
                                        <option value="under_review">Under Review</option>

                                    </select>
                                    <div
                                        class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-black">
                                        <img src="{{ asset('newsites/admin/images/arrow-down.png') }}" alt="images"
                                            class="w-3" />
                                    </div>
                                </div>
                            @elseif($dispute->status == 'under_review')
                                <span
                                    class="bg-[#F4C701] whitespace-nowrap text-[#000000] Poppins-medium text-[13px] px-4 py-1.5 rounded-md">Under Review</span>
                            @else
                                <span
                                    class="bg-[#F4C701] whitespace-nowrap text-[#000000] Poppins-medium text-[13px] px-6 py-1.5 rounded-md">Resolved</span>
                            @endif

                        </div>

                        <div class="py-2 px-4 space-y-2">

                            <div>
                                <p class="text-[#054F8B] Poppins-medium text-[15px] mb-1">Raised By</p>
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-3">
                                        <img src="{{ asset($dispute->openedUser->studentDefaultImage) }}" alt="Student"
                                            class="w-12 h-12 rounded-[8px] object-cover border-2 border-[#F4C701]">
                                        <span class="text-[#133754] font-medium">{{ $dispute->openedUser->name }}</span>
                                    </div>
                                    <span class="text-[#9A800B] text-sm Poppins-medium">(Student)</span>
                                </div>
                            </div>

                            <div>
                                <p class="text-[#9E0000] Poppins-medium text-[15px] mb-1">Raised Against</p>
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-3">
                                        <img src="{{ asset($dispute->against->tutorDefaultImage) }}" alt="Tutor"
                                            class="w-12 h-12 rounded-[8px] object-cover border-2 border-[#1CD8C4]">
                                        <span class="text-[#133754] font-medium">{{ $dispute->against->name }}</span>
                                    </div>
                                    <span class="text-[#008173] text-sm Poppins-medium">(Tutor)</span>
                                </div>
                            </div>
                        </div>
                        <div
                            class="bg-[#1CD8C4]  px-3 py-2 flex justify-between items-center text-[#0D2B45] Poppins-medium text-sm">
                            <span>Session Details</span>
                            <span class="text-[13px] Poppins font-normal">Session ID:
                                #{{ $dispute->session->session_id }}</span>
                        </div>
                        <div class="py-2 px-4 space-y-2">
                            <div class="space-y-3 pt-1">
                                <div class=" flex justify-between  Poppins text-sm text-[#3B3B3B]">
                                    <div class="flex items-center gap-3">
                                        <i class="fa-regular fa-calendar text-lg"></i>
                                        <span>{{ dateFormate($dispute->session->start_date, 'M d ,Y') }}</span>
                                    </div>

                                    <div class="flex items-center gap-3">
                                        <i class="fa-regular fa-clock text-lg"></i>
                                        <span>{{ $dispute->session->start_time_formatted }} -
                                            {{ $dispute->session->end_time_formatted }}</span>
                                    </div>


                                </div>

                                <div class="flex justify-between items-center">
                                    <span class="text-[#000000] Poppins text-[14px]">Total Fees</span>
                                    <span
                                        class="bg-[#1CD8C4] text-[#1F1F1F] Poppins-medium text-[15px] px-6 py-1 rounded-md">${{ $dispute->session->amount }}</span>
                                </div>

                                <div class="flex justify-between items-center">
                                    <span class="text-[#000000] Poppins text-[14px]">Payment Status</span>
                                    <span
                                        class="bg-[#F4C701] text-[#000000] Poppins-medium text-[13px] px-6 py-1.5 rounded-md">{{ $dispute->payment_status }}</span>
                                </div>
                            </div>

                            <hr class="border-gray-100">

                            <div class="flex justify-between items-center py-1">
                                <div class="flex items-center gap-2">
                                    <div class="bg-[#133754] p-1.5 rounded-md text-white">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13">
                                            </path>
                                        </svg>
                                    </div>
                                    <span
                                        class="text-[13px] Poppins text-[#000000] ">{{ $dispute->attachments()->where('type', 'dispute  ')->count() }}
                                        Files Attached</span>
                                </div>
                                <div class="flex items-center gap-2">
                                    @if ($dispute->against_reply != '')
                                        <div class="bg-[#28A745] rounded-sm p-0.5">
                                            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor"
                                                viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M5 13l4 4L19 7"></path>
                                            </svg>
                                        </div>
                                    @else
                                        <div
                                            class="bg-[#9D0000] flex items-center justify-center rounded-sm w-5.25 h-5.25">
                                            <i class="fa-solid fa-x text-white  text-[5px]"></i>
                                        </div>
                                    @endif
                                    <span class="text-[13px] text-[#000000] Poppins">Tutor Response</span>
                                </div>
                            </div>

                            <button
                                class="w-full bg-[#133754] text-[15px] text-white Poppins-medium py-3.25 rounded-lg transition hover:bg-[#0D2B45] cursor-pointer"
                                onclick="window.location.href='{{route('admin.disputeDetail',encrypt($dispute->id))}}'">
                                View Details
                            </button>

                        </div>
                    </div>
                @endforeach


            </div>



        </div>


        @push('script')
            <script>
                $(document).ready(function() {
                    $('.status').change(function() {
                        let selectBox = $(this);

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

                        let disputeStatus = $(this).val();
                        console.log(disputeStatus)
                        if (disputeStatus == 'under_review') {
                            $.ajax({
                                url: '{{ route('admin.dispute.update') }}',
                                data: {
                                    id: disputeId
                                },
                                method: 'POST',
                                success: function(response) {
                                    if (response.status == true) {
                                        toastr.success(response.message)
                                        selectBox.closest('.dispute_section').remove()
                                    } else {
                                        toastr.error(response.message)

                                    }
                                }
                            })
                        }
                    });
                })
            </script>
        @endpush
    @endsection
