@extends('layouts.main')

@section('content')

    <section class="py-4 py-md-3 banner-c">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h1 class="text-white f-sm-30 f-30 fw-500 mb-0">
                        Our Treatments
                    </h1>
                </div>
                <div class="col-md-4 mt-2 mt-md-0">
                    <form method="GET" action="{{ route('treatments') }}" id="treatmentForm">
                        <div class="form-gorup mb-0">
                            <select class="form-control treatment-dropdown" name="search">
                                <option value="">Search By Speciality</option>
                                @foreach($specialitiesDropdown as $speciality)
                                    <option value="{{ $speciality->Slug }}" {{ (request('search') == $speciality->Slug) ? "selected" : "" }}>
                                        {{ $speciality->SpecialityName }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <section class="breadcrumb pt-4 custom_breadcrumb">
        <div class="container">
            <div class="row align-items-center">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}" role="button" tabindex="0"><i class="fa fa-home"></i> Home</a></li>
                    <li class="breadcrumb-item">Our Treatments</li>
                </ol>
            </div>
        </div>
    </section>

    <section class="master-speciality-page pt-2">
        <div class="container">
            @if (request()->has('search') && !is_null(request('search')))

                <div class="clear-text-wrapper  mb-4">
                    <p class="mb-0 fw-500 f-16 clr5c pe-2 d-inline-block">You have selected:</p>
                        <a href="{{ route('treatments') }}" class="rounded-pill align-items-center bgBlueLight clrBlueDark my-2 d-inline-flex justify-content-center f-16 no-underline px-3 py-1 clear-text me-3">
                        <span class="me-1">{!! str_replace('-', ' ', request('search')) !!}</span>
                        <i class="fa-solid fa-xmark"></i>
                    </a>
                </div>

            @endif

            <div class="row">
                @foreach($treatments as $treatment)
                    <div class="col-md-4 mb-4">
                        <a href="{{ route('treatment.show', $treatment->Slug) }}" class="border bbg-wt sp-card border-1 pt-3 pb-3 px-3 d-flex align-items-center justify-content-between h-100 rounded-3 no-underline mb-0">
                            <div class="d-flex align-items-center">
                                <div class="me-md-3 me-3"></div>
                                <div>
                                    <h4 class="text-md-start f-15  mb-0 text-start clr5c">
                                        {{ $treatment->TreatmentName }}
                                    </h4>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

@stop

@section('javascript')
    <script>
        $(document).ready(function() {
            const treatmentDropdown = $('.treatment-dropdown');

            treatmentDropdown.select2({
                theme: "bootstrap-5",
            });

            treatmentDropdown.on('change', function () {
                $('#treatmentForm').submit();
            })
        });
    </script>
@stop