@extends('panel._theme_dashboard')

@section('content')
    <div class="container-fluid" style="margin-top: 10px;">
        <div class="row">
            <div class="col-6">
                @if(isset($show_now_button) && $show_now_button)
                    <a href="{{route("schedule")}}" class="btn bg-purple">Hoje</a>
                @endif
            </div>
            <div class="col-6 text-end">
                <a href="{{route("scheduling")}}" class="btn bg-purple">Novo Agendamento</a>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-10">
                <h5>Agenda - {{$formatted_schedule_date}}</h5>
            </div>
            <div class="col-1 text-center">
                <a class="text-decoration-none" href="{{route("schedule")."/".$formatted_previous_date}}">
                    <i class="fal fa-chevron-left fa-lg"></i>
                </a>
            </div>
            <div class="col-1 text-center">
                <a class="text-decoration-none" href="{{route("schedule")."/".$formatted_next_date}}">
                    <i class="fal fa-chevron-right fa-lg"></i>
                </a>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-12 d-flex align-items-stretch">
                <ul class="timeline-widget mb-0 position-relative mb-n5">
                    @foreach($schedules as $schedule)
                        <li class="timeline-item d-flex position-relative overflow-hidden lazy">
                            <div class="timeline-time text-dark flex-shrink-0 text-end">
                                {{date("H:i", strtotime($schedule->schedule_time_start))}} -
                                {{date("H:i", strtotime($schedule->schedule_time_end))}}
                            </div>
                            <div class="timeline-badge-wrap d-flex flex-column align-items-center">
                                <span class="timeline-badge border-2 border border-success flex-shrink-0 my-8"></span>
                                <span class="timeline-badge-border d-block flex-shrink-0"></span>
                            </div>
                            <div class="timeline-desc fs-3 text-dark mt-n1">
                                {{$schedule->schedule_client}}
                                <div class="d-block fw-normal">
                                    {{$schedule->service_name}}
                                </div>
                                <div class="d-block fw-normal">
                                    R$ {{$schedule->schedule_value}}
                                </div>
                                <div class="d-block fw-normal">
                                    <a href="{{route("scheduling")."/".$schedule->schedule_id}}"
                                       class="text-decoration-none">editar</a>
                                    &nbsp;-&nbsp;
                                    <a class="text-danger" onclick="deleteSchedule({{$schedule->schedule_id}})">
                                        remover
                                    </a>
                                </div>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
    @csrf
    <input type="hidden" name="remove_schedule_path" id="remove_schedule_path" value="{{route("scheduling.remove")}}">
@endsection
@section('customJS')
    <script src="{{asset("assets/js/panel/mobile/schedule.js")}}"></script>
@endsection