@extends('layouts.app')

@section('content')
    @php
        $locale = session()->get('locale') ? session()->get('locale') : App\Helpers\ConstantHelper::ENGLISH;
    @endphp

    <section class="pay-booking py-4 py-sm-5">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="top-head">
                        <h2>Book your Appointment</h2>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-2 py-sm-4">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="services-tabs">

                        <div class="tab-content" id="nav-tabContent">
                            <div class="tab-pane fade active show" id="nav-artist">

                                <nav class="booknavigation">
                                    <div class="nav nav-tabs" role="tablist">
                                        <button class="nav-link mr-0 mr-sm-3 active"><i class="fab fa-artstation"></i>
                                            Artist/Business</button>
                                        <button class="nav-link mr-0 mr-sm-3"><i class="far fa-list-alt"></i> Select
                                            Service</button>
                                        <button class="nav-link mr-0 mr-sm-3"><i class="far fa-clock"></i> Time</button>
                                        <button class="nav-link mr-0 mr-sm-3"><i class="far fa-user"></i> Details</button>
                                        <button class="nav-link mr-0 mr-sm-3"><i class="fas fa-file-invoice-dollar"></i>
                                            Billing</button>
                                        <button class="nav-link mr-0 mr-sm-3"><i class="far fa-thumbs-up"></i>
                                            Confirmed</button>
                                    </div>
                                </nav>

                                <div class="pt-4">
                                    <div class="result-found-area">
                                        <div class="">
                                            <form action="" method="get">
                                                <div class="row">
                                                    <div class="col-md-4 col-12">
                                                        <div class="search-group looking-input">
                                                            <a href="##">
                                                                <i class="fas fa-search"></i>
                                                            </a>
                                                            <input type="text" name="search" value="{{ $search }}"
                                                                class="form-control"
                                                                placeholder=" {{ __('dashboard.what_are_you_looking_for') }}?"
                                                                onchange="this.form.submit()">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 col-12 mt-sm-0 mt-2">
                                                        <div class="search-group location-input">
                                                            <input type="text" name="location" class="form-control"
                                                                placeholder="{{ __('dashboard.location') }}" value="{{ $location }}"
                                                                id="map-search" onchange="this.form.submit()">
                                                            <input type="hidden" id="latitude" name="latitude"
                                                                value="{{ $deviceLatitude }}" placeholder="Latitude" />
                                                            <input type="hidden" id="longitude" name="longitude"
                                                                value="{{ $deviceLongitude }}" placeholder="Longitude" />
                                                            <a href="#"><i class="fas fa-map-marker-alt"></i></a>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 mt-sm-0 mt-2">
                                                        <div class="search-group location-input">
                                                            <input type="text" name="date_range"
                                                                value="{{ $dateRange }}" class="form-control"
                                                                placeholder="location" onchange="this.form.submit()">
                                                            <a href="#"><i class="fas fa-calendar-alt"></i></a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row mt-3">
                                                    <div class="col-md-12">
                                                        <div class="d-sm-flex d-block">
                                                            <div class="notificationbar-2">
                                                                <div data-toggle="dropdown"
                                                                    class="dropdown d-inline-block cursor-pointer notifications-icon-div">
                                                                    <div class="project-dropnew">
                                                                        Categories <i
                                                                            class="fa fa-angle-down down-arrowlogo"
                                                                            aria-hidden="true"></i>
                                                                    </div>
                                                                    <div
                                                                        class="dropdown-menu dropdown-menu-md notificationtab-2 project-dropdownbox useraction-dropdown dropdown-menu-right">
                                                                        <div class="project-dropcontentbox filterForm">
                                                                            <div class="row">
                                                                                @foreach ($categories as $key => $category)
                                                                                    <div class="col-md-6">
                                                                                        <div
                                                                                            class="filter-check form-group">
                                                                                            <input type="checkbox"
                                                                                                class="filled-in"
                                                                                                name="categories[]"
                                                                                                value="{{ $category->id }}"
                                                                                                {{ in_array($category->id, isset($category_key) && count($category_key) > 0 ? $category_key : []) ? 'checked' : '' }}
                                                                                                id="example_{{ $category->id }}">
                                                                                            <label class="project-label"
                                                                                                for="example_{{ $category->id }}">
                                                                                                {{ $category->title_en }}</label>
                                                                                        </div>
                                                                                    </div>
                                                                                @endforeach
                                                                            </div>
                                                                            <div class="d-flex justify-content-between">
                                                                                <button
                                                                                    class="btn btn-outline-secondary btn-sm cancelButton">Cancel</button>
                                                                                <button type="submit"
                                                                                    class="btn btn-filter btn-primary btn-sm">Apply</button>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="notificationbar-2">
                                                                <div data-toggle="dropdown"
                                                                    class="dropdown d-inline-block cursor-pointer notifications-icon-div">
                                                                    <div class="project-dropnew">
                                                                        Price <i class="fa fa-angle-down down-arrowlogo"
                                                                            aria-hidden="true"></i>
                                                                    </div>

                                                                    <div
                                                                        class="dropdown-menu dropdown-menu-md notificationtab-2 project-dropdownbox useraction-dropdown dropdown-menu-right">
                                                                        <div class="project-dropcontentbox filterForm">
                                                                            <div class="row">
                                                                                <div class="col-md-6">
                                                                                    <div class="filter-check form-group">
                                                                                        <input type="radio"
                                                                                            class="filled-in"
                                                                                            name="price" value="0-50"
                                                                                            id="exampleCheck1"
                                                                                            {{ $selected_price == '0-50' ? 'checked' : '' }}>
                                                                                        <label class="project-label"
                                                                                            for="exampleCheck1">$50 and
                                                                                            Below</label>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-md-6">
                                                                                    <div class="filter-check form-group">
                                                                                        <input type="radio"
                                                                                            class="filled-in"
                                                                                            name="price" value="51-200"
                                                                                            id="exampleCheck2"
                                                                                            {{ $selected_price == '51-200' ? 'checked' : '' }}>
                                                                                        <label class="project-label"
                                                                                            for="exampleCheck2">$51-$200</label>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-md-6">
                                                                                    <div class="filter-check form-group">
                                                                                        <input type="radio"
                                                                                            class="filled-in"
                                                                                            name="price" value="201-500"
                                                                                            id="exampleCheck3"
                                                                                            {{ $selected_price == '201-500' ? 'checked' : '' }}>
                                                                                        <label class="project-label"
                                                                                            for="exampleCheck3">$201-$500</label>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-md-6">
                                                                                    <div class="filter-check form-group">
                                                                                        <input type="radio"
                                                                                            class="filled-in"
                                                                                            name="price"
                                                                                            value="501-1000"
                                                                                            id="exampleCheck4"
                                                                                            {{ $selected_price == '501-1000' ? 'checked' : '' }}>
                                                                                        <label class="project-label"
                                                                                            for="exampleCheck4">$501-$1000</label>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-md-6">
                                                                                    <div class="filter-check form-group">
                                                                                        <input type="radio"
                                                                                            class="filled-in"
                                                                                            name="price"
                                                                                            value="1001-2000"
                                                                                            id="exampleCheck5"
                                                                                            {{ $selected_price == '1001-2000' ? 'checked' : '' }}>
                                                                                        <label class="project-label"
                                                                                            for="exampleCheck5">$1001-$2000</label>
                                                                                    </div>
                                                                                </div>
                                                                            </div>

                                                                            <div class="d-flex justify-content-between">
                                                                                <button
                                                                                    class="btn btn-outline-secondary btn-sm cancelButton">Cancel</button>
                                                                                <button type="submit"
                                                                                    class="btn btn-filter btn-primary btn-sm">Apply</button>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>

                                        <div class="result-found-colums mt-3 py-4">
                                            <div class="px-3 px-sm-4">
                                                <div class="disc-results-found mb-4">
                                                    <a href="##">{{ $branches->total() }} Results Found</a>
                                                </div>

                                                <div class="row">
                                                    @forelse ($branches as $key => $branch)
                                                        <div class="col-md-6 mb-3">
                                                            <div class="makeup-bordr">
                                                                <div class="row align-items-center justify-content-center">
                                                                    <div class="col-md-12">
                                                                        <div class="makeup-item-content ">

                                                                            {{-- <div class="listing-badge makeup-badge">Most
                                                                            Popular</div> --}}

                                                                            <a href="book.html">
                                                                                <div
                                                                                    class="makeup-item-inner d-flex align-items-center">
                                                                                    <div class="makeup-img-circle mr-2">
                                                                                        <img src="{{ isset($branch->companyProfile->company_logo) ? $branch->companyProfile->company_logo : '' }}"
                                                                                            onerror="this.src='/assets/images/makeup-circle-1.jpg'"
                                                                                            alt="{{ isset($branch->companyProfile->company_logo) ? $branch->companyProfile->company_logo : '' }}">
                                                                                    </div>

                                                                                    <div class="makeup-context">
                                                                                        <h3>{{ @$branch->companyProfile->company_name }}
                                                                                            <i
                                                                                                class="far fa-check-circle text-success"></i>
                                                                                        </h3>
                                                                                        <p class="my-1">
                                                                                            {{ $branch->address }}
                                                                                            <span
                                                                                                class="text-success">({{ round($branch->distance) . 'Km' }}
                                                                                                )</span>
                                                                                        </p>
                                                                                        <div class="rating">
                                                                                            @php
                                                                                            $totalRating = round($branch->branchView->rating);
                                                                                            @endphp
                                                                                                @for ($i = 1; $i <= 5; $i++)
                                                                                                    @if ($i <= $totalRating)
                                                                                                        <i class="fas fa-star"></i>
                                                                                                    @else
                                                                                                        <i class="far fa-star"></i>
                                                                                                    @endif
                                                                                                @endfor
                                                                                                <span>({{ $totalRating }})</span>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </a>
                                                                            <div class="bdr-div my-3"></div>

                                                                            <div
                                                                                class="d-flex justify-content-between align-items-center mt-2">
                                                                                <div class="radio selectservicecheckbox">
                                                                                    <input
                                                                                        id="service_{{ $key }}"
                                                                                        name="selectartist" type="radio"
                                                                                        data-branch-id="{{ $branch->id }}"
                                                                                        class="with-gap select-service">
                                                                                    <label
                                                                                        for="service_{{ $key }}">
                                                                                        <span
                                                                                            class="badge-new badge-new-success">Select</span>
                                                                                    </label>
                                                                                </div>


                                                                                <div class="text-right">
                                                                                    <p class="makeup-details">

                                                                                        Starting Services from
                                                                                        {{ '$' . @$branch->branchView->starting_from }}
                                                                                    </p>
                                                                                </div>

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

                                                            </div>
                                                        </div>
                                                    @empty
                                                        <div class="col-md-6 mb-3">
                                                            <p>
                                                                <center class="text-danger">
                                                                    {{ __('admin::message.no_records_found') }}
                                                                </center>
                                                            </p>
                                                        </div>
                                                    @endforelse
                                                    {{ $branches->appends(request()->input())->links('admin::partials.pagination') }}
                                                </div>

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

                                <div class="d-flex mt-4 justify-content-between">
                                    <button class="btn btn-outline-secondary"><i class="fas fa-chevron-left mr-1"></i>
                                        Cancel</button>
                                    <button class="btn btn-primary" data-toggle="tab" data-target="#nav-services"><i
                                            class="fas fa-chevron-right mr-1"></i> Next</button>
                                </div>

                            </div>
                            <div class="tab-pane fade" id="nav-services">
                                <nav class="booknavigation">
                                    <div class="nav nav-tabs" role="tablist">
                                        <button class="nav-link mr-0 mr-sm-3"><i class="fab fa-artstation"></i>
                                            Artist/Business</button>
                                        <button class="nav-link mr-0 mr-sm-3 active"><i class="far fa-list-alt"></i>
                                            Select Service</button>
                                        <button class="nav-link mr-0 mr-sm-3"><i class="far fa-clock"></i> Time</button>
                                        <button class="nav-link mr-0 mr-sm-3"><i class="far fa-user"></i> Details</button>
                                        <button class="nav-link mr-0 mr-sm-3"><i class="fas fa-file-invoice-dollar"></i>
                                            Billing</button>
                                        <button class="nav-link mr-0 mr-sm-3"><i class="far fa-thumbs-up"></i>
                                            Confirmed</button>
                                    </div>
                                </nav>

                            <form class="form" role="post-data" method="POST" action="/api/bookings/store" redirect="/bookings/thanks">
                                @csrf

                                <div class="append-service-list">

                                </div>

                                <div class="d-flex mt-4 justify-content-between">
                                    <button class="btn btn-outline-secondary" data-toggle="tab"
                                        data-target="#nav-artist"><i class="fas fa-chevron-left mr-1"></i> Cancel</button>
                                    {{-- <button class="btn btn-primary" data-toggle="tab" data-target="#nav-Time" id="ajaxButton"><i
                                            class="fas fa-chevron-right mr-1"></i> Next</button> --}}
                                    <button type="button" class="btn btn-primary" role="button" data-toggle="tab" data-target="#nav-Time"
                                    data-request="ajax-submit" data-target="[role=post-data]"><i
                                    class="fas fa-chevron-right mr-1"></i> Next</button>
                                </div>
                            </form>
                            </div>

                            <div class="tab-pane fade" id="nav-Time">
                                <nav class="booknavigation">
                                    <div class="nav nav-tabs" role="tablist">
                                        <button class="nav-link mr-0 mr-sm-3"><i class="fab fa-artstation"></i>
                                            Artist/Business</button>
                                        <button class="nav-link mr-0 mr-sm-3"><i class="far fa-list-alt"></i> Select
                                            Service</button>
                                        <button class="nav-link mr-0 mr-sm-3 active"><i class="far fa-clock"></i>
                                            Time</button>
                                        <button class="nav-link mr-0 mr-sm-3"><i class="far fa-user"></i> Details</button>
                                        <button class="nav-link mr-0 mr-sm-3"><i class="fas fa-file-invoice-dollar"></i>
                                            Billing</button>
                                        <button class="nav-link mr-0 mr-sm-3"><i class="far fa-thumbs-up"></i>
                                            Confirmed</button>
                                    </div>
                                </nav>

                                <div class="row justify-content-center">
                                    <div class="col-md-7">
                                        <div class="bg-light p-3 my-4">
                                            <div class="bnooking-help-txt">
                                                <h6>Below you can find list of available time slots for <strong>Manuel,
                                                        Makeup Artist</strong></h6>
                                                <p>Select Date and time for Slot Booking</p>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="search-group search-group-1 form-group custominnergroup">
                                                        <label>Appointment Date <span class="text-danger">*</span></label>
                                                        {{-- <input type="date" class="form-control"
                                                            placeholder="Enter New Password" /> --}}
                                                        <input type="date" name="date" id="date" class="form-control" value=""  onchange="fetchAvailableSlots();" min="2025-12-10">
                                                    </div>
                                                </div>



                                                <div class="col-md-12">
                                                    <div class="search-group search-group-1 form-group custominnergroup">
                                                        <label>Appointment Time <span class="text-danger">*</span></label>
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <select class="chosen-select form-control" name="slot" id="slot">
                                                                    <option value="">Available Slots</option>
                                                                </select>
                                                                @error('slot')
                                                                    <div class="text-danger">{{ $message }}</div>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>

                                        <div class="d-flex mt-4 justify-content-between">
                                            <button class="btn btn-outline-secondary" data-toggle="tab"
                                                data-target="#nav-services"><i class="fas fa-chevron-left mr-1"></i>
                                                Cancel</button>
                                            <button class="btn btn-primary" data-toggle="tab"
                                                data-target="#nav-Details"><i class="fas fa-chevron-right mr-1"></i>
                                                Next</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="nav-Details">
                                <nav class="booknavigation">
                                    <div class="nav nav-tabs" role="tablist">
                                        <button class="nav-link mr-0 mr-sm-3"><i class="fab fa-artstation"></i>
                                            Artist/Business</button>
                                        <button class="nav-link mr-0 mr-sm-3"><i class="far fa-list-alt"></i> Select
                                            Service</button>
                                        <button class="nav-link mr-0 mr-sm-3"><i class="far fa-clock"></i> Time</button>
                                        <button class="nav-link mr-0 mr-sm-3 active"><i class="far fa-user"></i>
                                            Details</button>
                                        <button class="nav-link mr-0 mr-sm-3"><i class="fas fa-file-invoice-dollar"></i>
                                            Billing</button>
                                        <button class="nav-link mr-0 mr-sm-3"><i class="far fa-thumbs-up"></i>
                                            Confirmed</button>
                                    </div>
                                </nav>

                                <div class="row justify-content-center">
                                    <div class="col-md-8">
                                        <div class="bg-light p-3 my-4">
                                            <div class="bnooking-help-txt">
                                                <h6>You have selected <strong>Manuel, Makeup Artist</strong> Service from
                                                    <strong>09:00 AM to 10:00 AM</strong> on <strong>10-07-2023</strong> you
                                                    will be charged by <strong>$100</strong>
                                                </h6>
                                                <p>Please provide your details in the form below to proceed the book a
                                                    appointment</p>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="search-group search-group-1 form-group custominnergroup">
                                                        <label>First Name <span class="text-danger">*</span></label>
                                                        <input type="text" class="form-control"
                                                            placeholder="{{ __('placeholder.enter_first_name') }}" />
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="search-group search-group-1 form-group custominnergroup">
                                                        <label>Last Name <span class="text-danger">*</span></label>
                                                        <input type="text" class="form-control"
                                                            placeholder="{{ __('placeholder.enter_last_name') }}" />
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="search-group search-group-1 form-group custominnergroup">
                                                        <label>Email-ID <span class="text-danger">*</span></label>
                                                        <input type="text" class="form-control"
                                                            placeholder="{{ __('placeholder.enter_email_id') }}" />
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="search-group search-group-1 form-group custominnergroup">
                                                        <label>Mobile No. <span class="text-danger">*</span></label>
                                                        <input type="text" class="form-control"
                                                            placeholder="{{ __('placeholder.enter_mobile_no') }}" />
                                                    </div>
                                                </div>

                                                <div class="col-md-12">
                                                    <div class="search-group search-group-1 form-group custominnergroup">
                                                        <label>Appointment Booking Detail <span
                                                                class="text-danger">*</span></label>
                                                        <textarea type="number" rows="5" class="form-control" placeholder="{{ __('placeholder.enter_details') }}"></textarea>
                                                    </div>
                                                </div>



                                            </div>
                                        </div>

                                        <div class="d-flex mt-4 justify-content-between">
                                            <button class="btn btn-outline-secondary" data-toggle="tab"
                                                data-target="#nav-Time"><i class="fas fa-chevron-left mr-1"></i>
                                                Cancel</button>
                                            <button class="btn btn-primary" data-toggle="tab"
                                                data-target="#nav-Billing"><i class="fas fa-chevron-right mr-1"></i>
                                                Next</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="nav-Billing">
                                <nav class="booknavigation">
                                    <div class="nav nav-tabs" role="tablist">
                                        <button class="nav-link mr-0 mr-sm-3"><i class="fab fa-artstation"></i>
                                            Artist/Business</button>
                                        <button class="nav-link mr-0 mr-sm-3"><i class="far fa-list-alt"></i> Select
                                            Service</button>
                                        <button class="nav-link mr-0 mr-sm-3"><i class="far fa-clock"></i> Time</button>
                                        <button class="nav-link mr-0 mr-sm-3"><i class="far fa-user"></i> Details</button>
                                        <button class="nav-link mr-0 mr-sm-3 active"><i
                                                class="fas fa-file-invoice-dollar"></i> Billing</button>
                                        <button class="nav-link mr-0 mr-sm-3"><i class="far fa-thumbs-up"></i>
                                            Confirmed</button>
                                    </div>
                                </nav>

                                <div class="row justify-content-center">
                                    <div class="col-md-8">
                                        <div class="bg-light p-3 my-4">
                                            <div class="bnooking-help-txt">
                                                <h6>Apply <strong>coupon code</strong> and <strong>Redemption
                                                        points</strong> if any</h6>
                                                <p>Click on payment gateway to proceed</p>
                                            </div>


                                            <div class="row">
                                                <div class="col-md-6 col-12">
                                                    <div class="form-group custominnergroup">
                                                        <label class="pay-label">Sub Total <span
                                                                class="text-danger">*</span></label>
                                                        <div class="search-group">
                                                            <input type="text" class="form-control" placeholder=""
                                                                value="$100" disabled>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">

                                                <div class="col-md-6 col-12">
                                                    <div class="form-group custominnergroup">
                                                        <label class="pay-label w-100">Apply Coupon <span
                                                                class="redeem-txt cursor-pointer"
                                                                data-target="#couponavalialbel" data-toggle="modal">5
                                                                Coupon Available</span></label>
                                                        <div class="search-group position-relative">
                                                            <input type="text" class="form-control">
                                                            <button
                                                                class="btn btn-primary btn-sm cou-apply-btn">Apply</button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6 col-12">
                                                    <div class="form-group custominnergroup">
                                                        <label class="pay-label w-100">Redeem Points <span
                                                                class="redeem-txt">200 Points</span></label>
                                                        <div class="search-group">
                                                            <input type="text" class="form-control">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-md-6 col-12">
                                                    <div class="form-group custominnergroup">
                                                        <label class="pay-label">Balance Amount <span
                                                                class="text-danger">*</span></label>
                                                        <div class="search-group">
                                                            <input type="text" class="form-control" value="75.00"
                                                                disabled>
                                                        </div>
                                                        <div class="check-box mt-3">
                                                            <input id="service" type="checkbox" checked=""
                                                                class="filled-in">
                                                            <label for="service">
                                                                <div class="service-context">
                                                                    <p><strong>Partial Payment</strong></p>
                                                                </div>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>


                                                <div class="col-md-6 col-12">
                                                    <div class="form-group custominnergroup">
                                                        <label class="pay-label">Partially Amount <span
                                                                class="text-danger">*</span></label>
                                                        <div class="search-group">
                                                            <input type="text" class="form-control" value="55.00">
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>




                                            <div class="row mt-2 mt-sm-4">
                                                <div class="col-md-12">
                                                    <div id="accordion" class="pay-bookingaccord">
                                                        <div class="card">
                                                            <div class="card-header" id="headingOne">
                                                                <h5 class="mb-0">
                                                                    <button class="btn btn-link" data-toggle="collapse"
                                                                        data-target="#collapseOne" aria-expanded="true"
                                                                        aria-controls="collapseOne">
                                                                        <div className="address-radio">
                                                                            <input type="radio" class="with-gap"
                                                                                name="groupType" id="groupType0" />
                                                                            <label for="groupType0"
                                                                                class="mb-0 payment-label">Net
                                                                                Banking</label>
                                                                        </div>
                                                                    </button>
                                                                </h5>
                                                            </div>

                                                            <div id="collapseOne" class="collapse show"
                                                                aria-labelledby="headingOne" data-parent="#accordion">
                                                                <div class="card-body">
                                                                    You will be redirected to payment gateway to complete
                                                                    the payment.
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="card">
                                                            <div class="card-header" id="headingTwo">
                                                                <h5 class="mb-0">
                                                                    <button class="btn btn-link collapsed"
                                                                        data-toggle="collapse" data-target="#collapseTwo"
                                                                        aria-expanded="false" aria-controls="collapseTwo">
                                                                        <div className="address-radio">
                                                                            <input type="radio" class="with-gap"
                                                                                name="groupType" id="groupType1" />
                                                                            <label for="groupType1"
                                                                                class="payment-label mb-0">Credit / Debit
                                                                                Card</label>
                                                                        </div>
                                                                    </button>
                                                                </h5>
                                                            </div>
                                                            <div id="collapseTwo" class="collapse"
                                                                aria-labelledby="headingTwo" data-parent="#accordion">
                                                                <div class="card-body">
                                                                    You will be redirected to payment gateway to complete
                                                                    the payment.
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

                                        <div class="d-flex mt-4 justify-content-between">
                                            <button class="btn btn-outline-secondary" data-toggle="tab"
                                                data-target="#nav-Details"><i class="fas fa-chevron-left mr-1"></i>
                                                Cancel</button>
                                            <button class="btn btn-primary" data-toggle="tab"
                                                data-target="#nav-Confirmed"><i class="fas fa-chevron-right mr-1"></i>
                                                Confirm & Pay Now</button>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="tab-pane fade" id="nav-Confirmed">
                                <nav class="booknavigation">
                                    <div class="nav nav-tabs" role="tablist">
                                        <button class="nav-link mr-0 mr-sm-3"><i class="fab fa-artstation"></i>
                                            Artist/Business</button>
                                        <button class="nav-link mr-0 mr-sm-3"><i class="far fa-list-alt"></i> Select
                                            Service</button>
                                        <button class="nav-link mr-0 mr-sm-3"><i class="far fa-clock"></i> Time</button>
                                        <button class="nav-link mr-0 mr-sm-3"><i class="far fa-user"></i> Details</button>
                                        <button class="nav-link mr-0 mr-sm-3"><i class="fas fa-file-invoice-dollar"></i>
                                            Billing</button>
                                        <button class="nav-link mr-0 mr-sm-3 active"><i class="far fa-thumbs-up"></i>
                                            Confirmed</button>
                                    </div>
                                </nav>
                                <div class="row justify-content-center">
                                    <div class="col-md-8">
                                        <div class="p-3 my-4">
                                            <div class="bnooking-help-txt">
                                                <h6><i class="far fa-thumbs-up"></i> Congratulations !! <strong>Your
                                                        Booking has been confirmed for 10-07-2023 </strong> Please verify
                                                    details</h6>
                                                <p>We will send booking details via an email to you at nishu@gmail.com</p>
                                            </div>

                                            <div class="row mt-3">
                                                <div class="col-md-12 col-12">

                                                    <ul class="ideastatusbar payment-structure">
                                                        <li class="completed">
                                                            <h4>Service</h4>
                                                            <p>Haircut</p>
                                                        </li>
                                                        <li class="completed">
                                                            <h4>Artist/Business</h4>
                                                            <p>Manuel, Makeup Artist </p>
                                                        </li>
                                                        <li class="completed">
                                                            <h4>Date</h4>
                                                            <p>10-07-2023</p>
                                                        </li>
                                                        <li class="completed">
                                                            <h4>Appintment Time</h4>
                                                            <p>09:00 AM to 10:00 AM</p>
                                                        </li>
                                                    </ul>

                                                </div>
                                            </div>

                                            <div class="border-bottom mt-3 mb-2"></div>

                                            <div class="row">
                                                <div class="col-md-12 col-12">

                                                    <ul class="ideastatusbar payment-structure">
                                                        <li class="completed">
                                                            <h4>Amount Paid</h4>
                                                            <p>$100</p>
                                                        </li>
                                                        <li class="completed">
                                                            <h4>Balance Amount</h4>
                                                            <p>$20</p>
                                                        </li>
                                                        <li class="completed">
                                                            <h4>Total Amount</h4>
                                                            <p class="partfullamtpaid">$120</p>
                                                        </li>
                                                        <li>
                                                            <div class="badge-new badge-new-danger">Partially Paid</div>
                                                            <a href="#" class="paynoepoart"><i
                                                                    class="far fa-credit-card"></i> Pay Now</a>
                                                        </li>
                                                    </ul>

                                                </div>
                                            </div>


                                            <div class="status-contentbox">
                                                <div class="row">
                                                    <div class="col-md-6 col-6">
                                                        <h6>Status</h6>
                                                    </div>
                                                </div>
                                                <div class="row mt-3">
                                                    <div class="col-md-12 col-12">

                                                        <ul class="ideastatusbar">
                                                            <li class="completed">
                                                                <div class="ideadefstat"><span>1</span></div>
                                                                <h4>Booking Confirmed</h4>
                                                                <p>20/06/23 4:23 PM</p>
                                                            </li>
                                                            <li>
                                                                <div class="ideadefstat"><span>2</span></div>
                                                                <h4>Artist Left</h4>
                                                                <p>22/06/23 5:13 PM</p>
                                                            </li>
                                                            <li>
                                                                <div class="ideadefstat"><span>3</span></div>
                                                                <h4>Reached</h4>
                                                                <p>22/06/23 5:30 PM</p>
                                                            </li>
                                                            <li>
                                                                <div class="ideadefstat"><span>?</span></div>
                                                                <h4>Closed</h4>
                                                                <p>22/06/23 6:13 PM</p>
                                                            </li>
                                                        </ul>

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



                                        </div>

                                        <div class="d-flex mt-4 justify-content-between">
                                            <button class="btn btn-outline-secondary" data-toggle="tab"
                                                data-target="#nav-Billing"><i class="fas fa-chevron-left mr-1"></i>
                                                Cancel</button>
                                            <a href="dashboard.html" class="btn btn-primary"><i
                                                    class="fas fa-chevron-right mr-1"></i> Finished</a>
                                        </div>
                                    </div>
                                </div>
                            </div>




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

        </div>
    </section>
@endsection
@section('script')
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
        src="https://maps.googleapis.com/maps/api/js?key={{ config('app.MAP_API_KEY') }}&callback=initAutocomplete&libraries=places&v=weekly"
        defer></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

    <script>
        $(document).ready(function() {
            // Handle cancel button click
            $('.cancelButton').click(function() {
                // Clear checkbox selections
                $('input[type="checkbox"]').prop('checked', false);

                // Optionally trigger the form submission to reset the filters on the server
                $('.filterForm').submit();
            });
        });

        $(document).ready(function() {
            // Handle cancel button click
            $('.cancelButton').click(function() {
                // Clear checkbox selections
                $('input[type="radio"]').prop('checked', false);

                // Optionally trigger the form submission to reset the filters on the server
                $('.filterForm').submit();
            });
        });
    </script>
    <script>
        $(function() {
            $('input[name="date_range"]').daterangepicker({
                timePicker: false,
                startDate: moment().format('MM/DD/YYYY'),
                endDate: moment().format('MM/DD/YYYY'),
            }).val("{{ $dateRange }}");
        });

        $("#ajaxButton").click(function () {
                // Create an array to store the selected checkbox values
                var selectedServices = [];

                // Loop through the checkboxes and check if they are selected
                $("[type=checkbox]:checked").each(function () {

                });

            // Check if any checkboxes are selected
            if (selectedServices.length > 0) {
                // Perform the AJAX call with the selected values
                $.ajax({
                    type: 'POST',
                    url: 'your_ajax_endpoint',
                    data: {
                        '_token': '{{ csrf_token() }}',
                        'service_id': selectedServices,
                        'branch_id': branchId
                    },
                    success: function (response) {
                        // Handle the AJAX response as needed
                        console.log(response);
                    },
                    error: function (xhr) {
                        // Handle errors
                        console.error('AJAX error');
                    }
                });
            } else {
                alert('Please select at least one service.');
            }
        });

        $(".select-service").click(function() {
            var branchId = $(this).data('branch-id');

            $.ajax({
                type: 'GET',
                url: app_url + '/bookings/services/' + branchId,
                data: {
                    '_token': '{{ csrf_token() }}',
                    'branch_id': branchId
                },

                success: function(data) {

                    $('.append-service-list').html(data);
                },
                error: function(xhr) {
                    // Handle errors
                }
            });
        });

        function fetchAvailableSlots() {
            var params = {};
            params['search'] = $("#date").val();
            params['branch_id'] = "{{ $branch->id }}";
            console.log(params['branch_id']);
            var app_url = "{{ config('app.url') }}";
            $.ajax({
                beforeSend: function (xhr) { },
                url: app_url + '/branches/slots',
                method: "GET",
                dataType: "json",
                data: params,
                success: function (response) {
                    $("#slot").empty("");
                    var slots = response.data[$("#date").val()];
                    if(slots.length > 0){
                        var options = '<option value="">Select slot</option>';
                        $.each(slots, function (index, value) {
                            // let startTime = $("#start_time").val();
                            // let endTime = $("#end_time").val();
                            // let selected = '';
                            // if(startTime && endTime){
                            //     let selected_value = startTime+' - '+endTime;
                            //     selected = selected_value === value ? "selected" : "";
                            // }

                            // options += '<option value="' + value + '" '+selected+'>' + value + '</option>';
                            options += '<option value="' + value + '">' + value + '</option>';
                        });
                    }else{
                        var options = '<option value="">No slots available</option>';
                    }
                    $("#slot").append(options);
                },
            });
        }
    </script>
    <script type="text/javascript">
        function initAutocomplete() {
            const input = document.getElementById("map-search");
            const searchBox = new google.maps.places.SearchBox(input);

            searchBox.addListener("places_changed", () => {
                const places = searchBox.getPlaces();
                if (places.length == 0) {
                    return;
                }
                const place = places[0];
                document.getElementById("latitude").value = place.geometry['location'].lat();
                document.getElementById("longitude").value = place.geometry['location'].lng();
                console.log(document.getElementById("latitude").value);
            });
        }

        window.initAutocomplete = initAutocomplete;

        // $('#searchForm').submit(function (e) {
        //     e.preventDefault(); // Prevent the default form submission

        //     // Get the user's search query
        //     var searchQuery = $('#search').val();
        //     var mapSearch = $('#map-search').val();
        //     var latitude = $('#latitude').val();
        //     var longitude = $('#longitude').val();
        //     var params = '?search=' + encodeURIComponent(searchQuery) + '&location=' + encodeURIComponent(mapSearch) + '&latitude=' + encodeURIComponent(latitude) + '&longitude=' + encodeURIComponent(longitude);

        //     // Redirect to the search results page with the query appended to the URL
        //     window.location.href = '/branches' + params;
        // });
    </script>
@endsection