@extends('admin.layouts.layout')
@section('title', 'Dispute Detail')
@section('content')
    <div class=" min-h-screen">


        <div class="flex flex-wrap items-center gap-4 mb-4">

            <div
                class="w-full sm:w-[207px] flex Poppins-medium justify-center py-3 border border-[#E5E5E5] rounded-[5px] text-[#010101] Poppins text-[13px]">
                Session ID: #{{ $dispute->session->session_id }}
            </div>

            <div
                class="w-full sm:w-[207px] flex Poppins-medium justify-center py-3 border border-[#E5E5E5] rounded-[5px] text-[#010101] Poppins text-[13px] items-center gap-2">
                <i class="fa-regular fa-calendar text-lg"></i>
                <span>{{ dateFormate($dispute->session->start_date, 'M d , Y') }}</span>
            </div>

            <div
                class="w-full sm:w-[207px] flex Poppins-medium justify-center py-3 border border-[#E5E5E5] rounded-[5px] text-[#010101] Poppins text-[13px] items-center gap-2">
                <i class="fa-regular fa-clock text-lg"></i>
                <span>{{ $dispute->session->start_time_formatted }} - {{ $dispute->session->end_time_formatted }}</span>
            </div>

            <div
                class="w-full sm:w-[151px] flex Poppins-medium justify-center text-[16px] py-3 bg-[#009D2C] text-white rounded-[5px] font-semibold">
                ${{ $dispute->session->amount }}
            </div>
            
            <div
                class="w-full sm:w-[151px] flex Poppins-medium justify-center text-[13px] py-2.5 border-2 border-yellow-500 rounded-[5px] text-[#000000]">
                {{ ucFirst($dispute->payment_status) }}

            </div>
            @if ($dispute->status == 'pending' || $dispute->status == 'under_review')
                <div class="w-full sm:w-auto sm:ml-auto flex Poppins-medium gap-4">
                    <button type="button" command="show-modal" commandfor="approve"
                        class="w-full sm:w-[164px] cursor-pointer text-[13px] py-3.5 bg-teal-400 rounded-[5px] text-black Poppins-medium">
                        Approve Payment
                    </button>

                    <button type="button" command="show-modal" commandfor="refund"
                        class="w-full  cursor-pointer sm:w-[164px] text-[13px] py-3.5 bg-yellow-400 rounded-[5px] text-black Poppins-medium">
                        Refund
                    </button>
                </div>
            @endif

        </div>



        <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
            <div class="pr-9 border-r border-[#EBEBEB] ">
                <button
                    class="flex items-center justify-between
           w-[269px]
           py-1.5
           Poppins-medium
           bg-[#F4C701] text-[#000000]
           
           rounded-[5px] border border-[#EAEAEA]">
                    <div class="flex items-center gap-3 px-2">
                        <img src="{{ asset($dispute->openedUser->studentDefaultImage) }}"
                            class="w-[50px] h-[47px] rounded-[4.44px] border border-[#FFFFFF]" />
                        <span class="Poppins-medium text-[15px]">{{ $dispute->openedUser->name }}</span>
                    </div>
                </button>

                <h3 class="text-xl Poppins-medium mt-5 text-[#133754] mb-2">
                    Student’s Reason:
                </h3>

                <p class="text-[15px] text-[#4B4B4B] Poppins leading-6 mb-6">
                    {!! $dispute->description !!}
                </p>


                <div class=" rounded-[10px] border-2 border-[#EBEBEB] mt-3">


                    <div class="flex gap-3 flex-wrap px-5 py-3 pb-2 items-center">



                        <img src="{{ asset('newsites/admin/images/doller-yellow.png') }}" alt="images" class="mt-2" />
                        <h1
                            class="text-[14px] lg:text-[15px] xl:text-[16px] 2xl:text-[20px] Poppins-medium  text-[#133754]">
                            Student’s Evidence
                        </h1>
                    </div>
                    <hr class="  text-[#D7D7D7]">

                    @if ($dispute->attachments()->count() > 0)
                        @foreach ($dispute->attachments as $attachment)
                            <div class="flex items-center justify-between p-4 ">

                                <div class="flex items-center gap-3">
                                    <img class="w-10 h-10  rounded "
                                        src="{{ asset('newsites/admin/images/dummy-image.png') }}" />



                                    <div>
                                        <p class="text-[#515151] Poppins text-[15px]">{{ $attachment->file_name }}</p>
                                        <p class="text-[#515151] Poppins text-[12px]">{{ $attachment->file_size }}</p>
                                    </div>
                                </div>

                                <div class="flex gap-2">
                                    <button onclick="downloadFile('{{ asset($attachment->file) }}')"
                                        class="h-11.25 w-11.25 rounded-[5px] bg-[#1CD8C4] cursor-pointer">
                                        <i class="fa-solid fa-down-long text-[#000000]"></i>
                                    </button>


                                <button onclick="window.open('{{ asset($attachment->file) }}', '_blank')"
    class="border h-11.25 w-11.25 rounded-[5px] cursor-pointer bg-[#133754]">
    <i class="fa-solid fa-eye text-white"></i>
</button>

                                </div>

                            </div>

                            <hr class="  text-[#D7D7D7]">
                        @endforeach
                    @endif


                </div>

            </div>




            <div class="w-[95%]">



                <button
                    class="flex items-center justify-between
           w-[269px]
           py-1.5
           Poppins-medium
           bg-[#1CD8C4] text-[#000000]
           
           rounded-[5px] border border-[#EAEAEA]">
                    <div class="flex items-center gap-3 px-2">
                        <img src="{{ asset('newsites/admin/images/dispute-user-2.png') }}"
                            class="object-cover w-[50px] h-[47px] rounded-[4.44px] border-2 border-[#FFFFFF]" />
                        <span class="Poppins-medium text-[15px]">{{ $dispute->against->name }}</span>
                    </div>
                </button>

                <h3 class="text-xl Poppins-medium mt-5 text-[#133754] mb-2">
                    Tutor’s Reply:
                </h3>
                <p class="text-[15px] text-[#4B4B4B] Poppins leading-6 mb-6">
                    {!! $dispute->against_reply !!}
                </p>


                <div class=" rounded-[10px] border-2 border-[#EBEBEB] mt-3">


                    <div class="flex gap-3 flex-wrap px-5 py-3 pb-2 items-center">



                        <img src="{{ asset('newsites/admin/images/card-payout-icon-3.png') }}" alt="images"
                            class="mt-2" />
                        <h1
                            class="text-[14px] lg:text-[15px] xl:text-[16px] 2xl:text-[20px] Poppins-medium  text-[#133754]">
                            Tutor’s Evidence
                        </h1>
                    </div>
                    <hr class="  text-[#D7D7D7]">
                    @foreach ($dispute->response as $tutorEvidence)
                        <div class="flex items-center justify-between p-4 ">

                            <div class="flex items-center gap-3">
                                <img class="w-10 h-10  rounded "
                                    src="{{ asset('newsites/admin/images/dummy-image.png') }}" />



                                <div>
                                    <p class="text-[#515151] Poppins text-[15px]">{{ $tutorEvidence->file_name }}</p>
                                    <p class="text-[#515151] Poppins text-[12px]">{{ $tutorEvidence->file_size }}</p>
                                </div>
                            </div>

                            <div class="flex gap-2">
                                <button onclick="downloadFile('{{ asset($tutorEvidence->file) }}')"
                                    class="h-11.25 w-11.25 rounded-[5px] bg-[#1CD8C4] cursor-pointer">
                                    <i class="fa-solid fa-down-long text-[#000000]"></i>
                                </button>

<button onclick="window.open('{{ asset($tutorEvidence->file) }}', '_blank')"
    class="border h-11.25 w-11.25 rounded-[5px] cursor-pointer bg-[#133754]">
    <i class="fa-solid fa-eye text-white"></i>
</button>

                            </div>

                        </div>

                        <hr class="  text-[#D7D7D7]">
                    @endforeach


                </div>

            </div>

        </div>

    </div>

    <el-dialog>
        <dialog id="refund" aria-labelledby="dialog-title"
            class="fixed  modalShadow inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent">
            <el-dialog-backdrop
                class="fixed inset-0 bg-gray-900/80 opacity-80 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"></el-dialog-backdrop>

            <div tabindex="0"
                class="m-auto  flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0">
                <el-dialog-panel
                    class="m-auto relative transform overflow-hidden rounded-sm bg-gray-800 text-left shadow-xl outline -outline-offset-1 outline-white/10 transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-[554px] w-full   data-closed:sm:translate-y-0 data-closed:sm:scale-95">
                    <div class="form bg-[#FFFFFF] px-4 pt-2 pb-4 sm:p-7 sm:pb-4">
                        <div class="flex justify-between sm:items-center">

                            <h1
                                class="text-[#181D27] flex-1 text-center fo-m sm:text-[26px] text-[24px] Poppins font-semibold">
                                Refund Confirmation</h1>

                            <button command="close" commandfor="refund" class="cursor-pointer ">

                                <img src="{{ asset('tutor/images/cros-icon.png') }}" />
                            </button>
                        </div>

                        <p class="text-[#414651] Poppins-medium text-[17px] text-center mt-4">Are you sure to Refund?</p>









                        <form action="{{ route('admin.dispute.refund', $dispute->id) }}" method="post">
                            <div class="mt-3 flex w-full gap-3">
                                <button command="close" commandfor="refund"
                                    class=" cursor-pointer px-3 Poppins-medium text-[16px] border-[#1CD8C4] border rounded-sm w-full sm:py-4 py-3 text-[#000000] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                    No
                                </button>
                                @csrf
                                <button type="submit"
                                    class="bg-[#1CD8C4] cursor-pointer px-3 border-[#1CD8C4] border rounded-sm w-full sm:py-4 py-3 text-[#000000] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                    Yes, Refund
                                </button>
                            </div>
                        </form>


                    </div>

                </el-dialog-panel>
            </div>
        </dialog>
    </el-dialog>


    <el-dialog>
        <dialog id="approve" aria-labelledby="dialog-title"
            class="fixed  modalShadow inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent">
            <el-dialog-backdrop
                class="fixed inset-0 bg-gray-900/80 opacity-80 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"></el-dialog-backdrop>

            <div tabindex="0"
                class="m-auto  flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0">
                <el-dialog-panel
                    class="m-auto relative transform overflow-hidden rounded-sm bg-gray-800 text-left shadow-xl outline -outline-offset-1 outline-white/10 transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-[554px] w-full   data-closed:sm:translate-y-0 data-closed:sm:scale-95">
                    <div class="form bg-[#FFFFFF] px-4 pt-2 pb-4 sm:p-7 sm:pb-4">
                        <div class="flex justify-between sm:items-center">

                            <h1
                                class="text-[#181D27] flex-1 text-center fo-m sm:text-[26px] text-[24px] Poppins font-semibold">
                                Approve Confirmation</h1>

                            <button command="close" commandfor="approve" class="cursor-pointer ">

                                <img src="{{ asset('tutor/images/cros-icon.png') }}" />
                            </button>
                        </div>

                        <p class="text-[#414651] Poppins-medium text-[17px] text-center mt-4">Are you sure to Confirm this?
                        </p>


                        <form action="{{ route('admin.dispute.approve', $dispute->id) }}" method="post">
                            <div class="mt-3 flex w-full gap-3">
                                <button command="close" commandfor="approve"
                                    class=" cursor-pointer px-3 Poppins-medium text-[16px] border-[#1CD8C4] border rounded-sm w-full sm:py-4 py-3 text-[#000000] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                    No
                                </button>
                                @csrf
                                <button type="submit"
                                    class="bg-[#1CD8C4] cursor-pointer px-3 border-[#1CD8C4] border rounded-sm w-full sm:py-4 py-3 text-[#000000] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                    Yes, Approve
                                </button>
                            </div>
                        </form>


                    </div>

                </el-dialog-panel>
            </div>
        </dialog>
    </el-dialog>

    @push('script')
        <script>
            function downloadFile(url) {
                const a = document.createElement('a');
                a.href = url;
                a.download = '';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            }
        </script>
    @endpush
@endsection
