@extends('student.layouts.layout')
@section('title', 'Disputes')

@section('content')
    <div class=" ">

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


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

                    </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 }}</p>
                    <p class="text-sm Poppins-medium text-[#3F3F3F]">Total number of disputes raised by You</p>
                </div>


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

                    </div>
                    <p class="text-sm text-[#313131] Poppins mb-0">Active Disputes</p>
                    <p class="text-[28px]  text-[#133754] Poppins font-semibold  mb-0">{{ $activeDisputes }}</p>
                    <p class="text-sm Poppins-medium text-[#3F3F3F]">Disputes currently under review</p>
                </div>

                <div class="bg-white max-h-[155px] p-3 w-full rounded-[10px] border border-[#DADADA] shadow bg-no-repeat bg-cover"
                    style="background-image: url('{{ asset('student/Sites/images/card-bg-3.png') }}');">
                    <div class="flex items-center justify-between mb-0">
                        <img src="{{ asset('student/Sites/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">{{ $resolvedDisputes }}</p>

                    <p class="text-sm Poppins-medium text-[#3F3F3F]">Disputes with final decisions</p>
                </div>
                <div class="bg-white max-h-[155px] p-3 w-full rounded-[10px] border border-[#DADADA] shadow bg-no-repeat bg-cover"
                    style="background-image: url('{{ asset('student/Sites/images/card-bg-green.png') }}');">
                    <div class="flex items-center justify-between mb-0">
                        <img src="{{ asset('student/Sites/images/card-payout-icon-4.png') }}" />

                    </div>
                    <p class="text-sm text-[#313131] Poppins mb-0">In Your Favor</p>
                    <p class="text-[28px]  text-[#133754] Poppins font-semibold  mb-0">{{ $inFavor }}</p>
                    <p class="text-sm Poppins-medium text-[#3F3F3F]">Disputes resolved in favor of the student</p>
                </div>
            </div>
            <div class="flex items-center gap-3 mt-2">
                <img src="{{ asset('student/Sites/images/support-card-2.png') }}" alt="Disputes">
                <p class="text-[#133754] Poppins-medium text-[20px] mb-2">
                    Disputes By You
                </p>
            </div>

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

            <div class="grid 2xl:grid-cols-4 lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 2xl:gap-4 gap-2">

                @foreach ($disputes as $dispute)
                    <div class="lg:max-w-sm rounded-[5px] border border-[#DDDDDD] bg-white p-3">
                        <div class="flex justify-between items-end">
                            <div class="flex flex-col gap-3">
                                <img src="{{ asset($dispute->otherUser->tutorDefaultImage) }}"
                                    class="h-19.5 w-19.5 rounded-[3px] object-cover" alt="Teacher" />
                                <div>
                                    <h3 class="text-[16px] Inter-m text-[#133754]">
                                        {{ $dispute->otherUser->name ?? '' }}
                                    </h3>

                                    <p class="text-sm text-[#3B3B3B] Poppins">
                                        {{ $dispute->session->subject_names ?? '' }}
                                    </p>

                                    <p class="text-sm text-[#3B3B3B] Poppins">
                                        Session ID: #{{ $dispute->session_id }}
                                    </p>
                                </div>
                            </div>

                            <div class="flex flex-col gap-2 items-end">
                                    
                                @if ($dispute->status == 'pending')
                                    <span
                                        class="bg-[#00B200] rounded-[2.26px] px-5 py-1.5 text-sm text-white Poppins-medium">
                                        New
                                    </span>
                                @elseif($dispute->status == 'responded')
                                    <span class="bg-[#00B200] rounded-[2.26px] px-5 py-2 text-sm text-white Poppins-medium">
                                        Responded
                                    </span>
                                @elseif($dispute->status == 'under_review')
                                    <span class="bg-[#E28400] rounded-[2.26px] px-5 py-2 text-sm text-white Poppins-medium">
                                        Under Review
                                    </span>
                                @elseif($dispute->status == 'resolved')
                                    <span
                                        class="bg-[#35A800] rounded-[2.26px] px-[26px] py-1.5 text-sm text-white Poppins-medium">
                                        Resolved
                                    </span>
                                @elseif($dispute->status == 'refunded')
                                    <span
                                        class="bg-[#C20000] rounded-[2.26px] px-[26px] py-1.5 text-sm text-white Poppins-medium">
                                        Refunded
                                    </span>
                                @else
                                    <span
                                        class="bg-[#C20000] rounded-[2.26px] px-[26px] py-1.5 text-sm text-white Poppins-medium">
                                        {{ $dispute->status }}
                                    </span>
                                @endif

                                <button
                                    class="rounded-[3px] Inter bg-[#1CD8C4] border-[#1CD8C4] border px-6 py-1.25 text-[16px] font-semibold text-white">
                                    ${{ $dispute->session->amount ?? '0' }}/<span class="font-medium text-[13px]">hr</span>
                                </button>

                            </div>
                        </div>

                        <hr class="my-2 text-[#D7D7D7]">

                        <div class="mt-4 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>{{ \Carbon\Carbon::parse($dispute->opened_date)->format('M d, Y') }}</span>
                            </div>

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

                        </div>

                        <div class="mt-4 flex justify-between items-center">
                            <p class="text-sm Poppins text-[#000000]">Total Fees</p>
                            <span
                                class="rounded-[5px] bg-[#F2F2F2] px-7.75 py-1.25 text-[15px] font-semibold text-[#133754]">
                                ${{ $dispute->session->amount ?? '0' }}
                            </span>
                        </div>

                        <div class="mt-3 flex justify-between items-center">
                            <p class="text-sm text-[#000000] Poppins">Payment Status</p>

                            @if ($dispute->payment_status == 'pending')
                                <span
                                    class="rounded-[5px] Poppins-medium bg-[#F4C701] px-7.5 py-[7px] text-[13px] text-black">
                                    Pending
                                </span>
                            @elseif($dispute->payment_status == 'paid')
                                <span
                                    class="rounded-[5px] Poppins-medium bg-[#00C200] px-5 py-[7px] text-[13px] text-white">
                                    Completed
                                </span>
                                @elseif($dispute->payment_status == 'refunded')
                               <span
                                    class="rounded-[5px] Poppins-medium bg-[#C20000] px-7.5 py-[7px] text-[13px] text-white">
                                    Refunded
                                </span>
                                @else
                                   <span
                                    class="rounded-[5px] Poppins-medium bg-[#00C200] px-5 py-[7px] text-[13px] text-white">
                                    Paid
                                </span>

                            @endif

                        </div>

                        <hr class="my-3 text-[#D7D7D7]">

                        <h4 class="Poppins-medium text-[17px] text-[#133754]">Subject</h4>

                        <p class="mt-1 text-sm Poppins-l text-[#090909]">
                            {!! Str::limit($dispute->title, 120) !!}
                        </p>

                        <hr class="my-3 text-[#D7D7D7]">

                        <h4 class="Poppins-medium text-[17px] text-[#133754]">Detail</h4>

                        <p class="mt-1 text-sm Poppins-l text-[#090909]">
                            {!! Str::limit($dispute->description, 120) !!}
                        </p>
                    </div>
                @endforeach
            </div>

            <div class="w-full flex justify-center mt-12">
                {!! $disputes->links('components.pagination') !!}
            </div>

        </div>
        <el-dialog>
            <dialog id="editdisputepop" 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-5 pb-4 sm:p-8 sm:pb-4">
                            <div class="flex justify-between sm:items-start">
                                <div>

                                    <h1 class="text-[#181D27] fo-m sm:text-[26px] text-[20px] Poppins font-semibold">Edit
                                        Dispute</h1>
                                </div>
                                <button command="close" commandfor="editdisputepop" class="cursor-pointer">

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

                            <div class="mt-3">
                                <p class="Poppins-medium text-lg text-[#414651] font-medium">Title</p>
                                <div class="relative flex gap-5 w-full mt-3">
                                    <div class="field w-full">
                                        <input
                                            class="w-full text-[#717680] placeholder:text-[#717680] shadow-[0px_1.38px_2.77px_0px_#0A0D120D]  Poppins text-[17px] border-[#D5D7DA] border-[1.29px] sm:p-3 p-3 rounded-[10px] bg-white"
                                            placeholder="Lorem Ipsum is simply dummy text of the printing">
                                    </div>

                                </div>
                            </div>

                            <div class="relative mb-3 mt-4">
                                <label class="block mb-2 px-1 text-[17px] Poppins-medium text-[#414651]">
                                    Details
                                </label>

                                <div class="editor mt-2 border rounded max-h-[211px]">
                                    <div class="ql-toolbar ql-snow"></div>
                                    <div class="ql-container h-full">
                                        <div class="ql-editor h-full overflow-y-auto leading-relaxed">
                                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                            Ipsum has been
                                            the industry's standard dummy text ever since the 1500s, when an unknown printer
                                            took a galley of
                                            type and scrambled it to make a type specimen book. It has survived not only
                                            five centuries, but
                                            also the leap into electronic typesetting, remaining essentially unchanged. It
                                            was popularised
                                            in the 1960s with the release of Letraset sheets containing Lorem Ipsum
                                            passages, and more recently
                                            with desktop publishing software like Aldus PageMaker including versions of
                                            Lorem Ipsum.
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <label class=" block mb-3 text-[17px] Poppins-medium text-[#414651]">
                                Upload Evidence
                            </label>

                            <div
                                class="border-dashed border-2 border-gray-200  rounded-[11px] h-[139px] 
            flex items-center justify-center">

                                <label for="file-upload"
                                    class="flex flex-col items-center justify-center cursor-pointer transition">
                                    <img src="{{ asset('student/Sites/images/file-uploader.png') }}" class="" />

                                    <span class="text-sm text-[#181D27] Poppins">Click to <a
                                            class="underline-offset-0 text-blue-500">browse </a> or drag & drop here
                                    </span>

                                    <input id="file-upload" type="file" class="hidden" />
                                </label>
                            </div>


                            <div
                                class=" w-full p-4 bg-[#F4F4F4] border border-[#E7E7E7] rounded-md my-3  max-h-[104px] shadow-sm">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-3">
                                        <img src="{{ asset('student/Sites/images/uploading-image.png') }}"
                                            class="" />

                                        <div>
                                            <p class="font-semibold Poppins text-[#0B0B0B] text-[11px]">Image.jpg</p>
                                            <p class="text-[#6D6D6D] Poppins text-[11px]">500kb</p>
                                        </div>
                                    </div>

                                    <button type="button" class="text-gray-400 hover:text-gray-600 focus:outline-none"
                                        aria-label="Cancel upload">
                                        <i class="fa-solid fa-xmark cursor-pointer"></i>
                                    </button>
                                </div>

                                <div class="mt-4 flex items-center justify-between">
                                    <div class="flex-1 bg-gray-200 rounded-full h-2.5 mr-4">
                                        <div class="bg-[#3EB8D4] h-2.5 rounded-full" style="width: 60%;"></div>
                                    </div>
                                    <p class="text-sm text-gray-500 w-12 text-right">60%</p>
                                </div>

                            </div>

                            <div class="mt-3">
                                <button
                                    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">
                                    Save Changes
                                </button>
                            </div>


                        </div>

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

    </div>
@endsection
