{{-- section --}}
<section id="content--section" class="content--section">
    <div class="container rtl--direction">





        {{-- submenu --}}
        <livewire:dashboard.clients.components.sub-menu />










        {{-- ------------------------------------ --}}
        {{-- ------------------------------------ --}}






        {{-- topRow --}}
        <div class="row align-items-center rtl--direction" style="margin-bottom: 90px" data-aos="fade"
            data-aos-duration="600" data-aos-delay="600" data-aos-once="true" wire:ignore.self>






            {{-- newButon --}}
            <div class="col-4">
                <button
                    class="btn btn--scheme btn--scheme-theme px-4 scalemix--3 py-2 d-inline-flex align-items-center btn--input"
                    data-bs-target="#new-opponent" data-bs-toggle="modal" type="button">
                    <svg class="bi bi-plus-circle-dotted fs-5 me-2" xmlns="http://www.w3.org/2000/svg" width="1em"
                        height="1em" fill="currentColor" viewBox="0 0 16 16">
                        <path
                            d="M8 0c-.176 0-.35.006-.523.017l.064.998a7.117 7.117 0 0 1 .918 0l.064-.998A8.113 8.113 0 0 0 8 0zM6.44.152c-.346.069-.684.16-1.012.27l.321.948c.287-.098.582-.177.884-.237L6.44.153zm4.132.271a7.946 7.946 0 0 0-1.011-.27l-.194.98c.302.06.597.14.884.237l.321-.947zm1.873.925a8 8 0 0 0-.906-.524l-.443.896c.275.136.54.29.793.459l.556-.831zM4.46.824c-.314.155-.616.33-.905.524l.556.83a7.07 7.07 0 0 1 .793-.458L4.46.824zM2.725 1.985c-.262.23-.51.478-.74.74l.752.66c.202-.23.418-.446.648-.648l-.66-.752zm11.29.74a8.058 8.058 0 0 0-.74-.74l-.66.752c.23.202.447.418.648.648l.752-.66zm1.161 1.735a7.98 7.98 0 0 0-.524-.905l-.83.556c.169.253.322.518.458.793l.896-.443zM1.348 3.555c-.194.289-.37.591-.524.906l.896.443c.136-.275.29-.54.459-.793l-.831-.556zM.423 5.428a7.945 7.945 0 0 0-.27 1.011l.98.194c.06-.302.14-.597.237-.884l-.947-.321zM15.848 6.44a7.943 7.943 0 0 0-.27-1.012l-.948.321c.098.287.177.582.237.884l.98-.194zM.017 7.477a8.113 8.113 0 0 0 0 1.046l.998-.064a7.117 7.117 0 0 1 0-.918l-.998-.064zM16 8a8.1 8.1 0 0 0-.017-.523l-.998.064a7.11 7.11 0 0 1 0 .918l.998.064A8.1 8.1 0 0 0 16 8zM.152 9.56c.069.346.16.684.27 1.012l.948-.321a6.944 6.944 0 0 1-.237-.884l-.98.194zm15.425 1.012c.112-.328.202-.666.27-1.011l-.98-.194c-.06.302-.14.597-.237.884l.947.321zM.824 11.54a8 8 0 0 0 .524.905l.83-.556a6.999 6.999 0 0 1-.458-.793l-.896.443zm13.828.905c.194-.289.37-.591.524-.906l-.896-.443c-.136.275-.29.54-.459.793l.831.556zm-12.667.83c.23.262.478.51.74.74l.66-.752a7.047 7.047 0 0 1-.648-.648l-.752.66zm11.29.74c.262-.23.51-.478.74-.74l-.752-.66c-.201.23-.418.447-.648.648l.66.752zm-1.735 1.161c.314-.155.616-.33.905-.524l-.556-.83a7.07 7.07 0 0 1-.793.458l.443.896zm-7.985-.524c.289.194.591.37.906.524l.443-.896a6.998 6.998 0 0 1-.793-.459l-.556.831zm1.873.925c.328.112.666.202 1.011.27l.194-.98a6.953 6.953 0 0 1-.884-.237l-.321.947zm4.132.271a7.944 7.944 0 0 0 1.012-.27l-.321-.948a6.954 6.954 0 0 1-.884.237l.194.98zm-2.083.135a8.1 8.1 0 0 0 1.046 0l-.064-.998a7.11 7.11 0 0 1-.918 0l-.064.998zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z">
                        </path>
                    </svg>{{ __('New Opponent') }}
                </button>
            </div>










            {{-- search --}}
            <div class="col-2 text-center">
                <input class="form--input main-version w-100" type="search"
                    wire:model.live.debounce.50ms='searchOpponent' placeholder="{{ __('Search by Opponent') }}" />
            </div>







            {{-- fileType --}}
            <div class="col-2">
                <div class="select--single-wrapper" wire:ignore>
                    <select class="form-select form--select2 init--select" data-instance='searchFileType'
                        data-clear='true' data-placeholder="{{ __('Select File Type') }}">
                        <option value=""></option>

                        @foreach ($fileTypes ?? [] as $fileType)
                        <option value="{{ $fileType }}">{{ __($fileType) }}</option>
                        @endforeach

                    </select>
                </div>
            </div>










            {{-- totalCount --}}
            <div class="col-4 text-end">
                <h2 class="fw-bold scale--self-05 counter--badge" data-bs-toggle="tooltip" data-bss-tooltip=""
                    title="{{ __('Number of Opponents') }}">
                    {{ $opponents->total() }}
                </h2>
            </div>




        </div>
        {{-- end topRow --}}










        {{-- ------------------------------------------------------------------ --}}
        {{-- ------------------------------------------------------------------ --}}











        {{-- row --}}
        <div class="row mb-5 rtl--direction" data-aos="fade" data-aos-duration="600" data-aos-delay="600"
            data-aos-once="true" wire:ignore.self>






            {{-- loop - opponents --}}
            @foreach ($opponents ?? [] as $opponent)





            <div class="col-4 col-xl-4 col-xxl-3">
                <div class="overview--card client-version scale--self-05 mb-floating">
                    <div class="row">




                        {{-- 1: filesCount --}}
                        <div class="col-3">
                            <h6 class="text-center fw-bold badge--theme-light py-1 rounded-1 mb-1 fs-13">
                                {{ $opponent->numberOfFiles() }}
                            </h6>
                            <span class="d-block text-center fw-semibold fs-12">{{ __('Files') }}</span>
                        </div>





                        {{-- 2: imageFile --}}
                        <div class="col-6 text-center position-relative">
                            <img class="client--card-logo"
                                src="{{url($storagePath . 'opponents/profiles/' . ($opponent?->imageFile ?? $globalOpponentFallback))}}" />
                        </div>





                        {{-- 3: casesCount --}}
                        <div class="col-3">
                            <h6 class="text-center fw-bold badge--theme-light py-1 rounded-1 mb-1 fs-13">
                                {{ $opponent?->cases?->count() ?? 0 }}
                            </h6>
                            <span class="d-block text-center fw-semibold fs-12">{{ __('Cases') }}</span>
                        </div>








                        {{-- 4: name --}}
                        <div class="col-12 ">
                            <h6 class="text-center fw-semibold
                            mt-4 mb-4 fs-15 truncate-text-1l">{{$opponent?->{__('name')} }}</h6>
                        </div>










                        {{-- --------------------------- --}}
                        {{-- --------------------------- --}}








                        {{-- email --}}
                        <div class="col-6">
                            <p class="d-flex align-items-center fs-12 text-scheme-dark-1 mb-1 justify-content-center"
                                data-bs-toggle="tooltip" data-bss-tooltip="" data-bs-placement="bottom"
                                href="mailto:{{ $opponent?->email }}" title="{{ $opponent?->email }}">
                                <span class="icon--circle me-2">
                                    <svg class="bi bi-envelope-fill" xmlns="http://www.w3.org/2000/svg" width="1em"
                                        height="1em" fill="currentColor" viewBox="0 0 16 16">
                                        <path
                                            d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757Zm3.436-.586L16 11.801V4.697l-5.803 3.546Z">
                                        </path>
                                    </svg>
                                </span>{{__('Email')}}
                            </p>
                        </div>






                        {{-- phone --}}
                        <div class="col-6">
                            <p class="d-flex align-items-center fs-12 text-scheme-dark-1 mb-1 justify-content-center"
                                data-bs-toggle="tooltip" data-bss-tooltip="" data-bs-placement="bottom"
                                href="tel:+971{{ $opponent?->phone }}" title="{{ $opponent?->phone }}">
                                <span class="icon--circle me-2">
                                    <svg class="bi bi-telephone-fill" xmlns="http://www.w3.org/2000/svg" width="1em"
                                        height="1em" fill="currentColor" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd"
                                            d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z">
                                        </path>
                                    </svg>
                                </span>{{__('Phone')}}
                            </p>
                        </div>










                        {{-- --------------------------- --}}
                        {{-- --------------------------- --}}







                        {{-- actions --}}
                        <div class="col-12">
                            <div class="d-flex align-items-center justify-content-center mb-1 mt-3">


                                {{-- details --}}
                                <a class="btn btn--scheme btn--scheme-theme fs-12 px-4 mx-1 scale--self-05 disabled btn--action"
                                    wire:navigate href="">{{__('Details')}}
                                </a>


                                {{-- cases --}}
                                <a class="btn btn--scheme btn--scheme-theme fs-12 px-3 mx-1 scale--self-05 disabled btn--action"
                                    href="" wire:navigate>
                                    {{__('Cases')}}
                                </a>




                                {{-- 3: remove --}}
                                <button type='button'
                                    class="btn btn--scheme btn--remove fs-12 px-3 mx-1 scale--self-05 btn--action"
                                    wire:loading.attr='disabled' wire:click='remove({{ $opponent->id }})'>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor"
                                        viewBox="0 0 16 16" class="bi bi-trash fs-6 ">
                                        <path
                                            d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z">
                                        </path>
                                        <path fill-rule="evenodd"
                                            d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z">
                                        </path>
                                    </svg>
                                </button>



                            </div>
                        </div>
                        {{-- endCol --}}




                    </div>
                </div>
            </div>
            @endforeach
            {{-- end loop --}}






        </div>
    </div>
    {{-- end container --}}












    {{-- ----------------------------------------------------- --}}
    {{-- ----------------------------------------------------- --}}








    {{-- selectHandle --}}
    <script>
        $(".init--select").on("change", function(event) {


            // 1.1: getValue - instanceItem
            selectValue = $(this).select2('val');
            instance = $(this).attr('data-instance');

            @this.set(instance, selectValue);

        }); //end function
    </script>














    {{-- ------------------------------------------------- --}}
    {{-- ------------------------------------------------- --}}




    {{-- :: modals --}}
    @section('modals')




    {{-- 1: create --}}
    <livewire:dashboard.opponents.components.opponents-create />





    @endsection
    {{-- endSection --}}






    {{-- ------------------------------------------------- --}}
    {{-- ------------------------------------------------- --}}







</section>
{{-- endSection --}}