@extends('layouts.app')
@section('title')
    {{ __('messages.Booking') }}
@endsection
@section('style')

        <link
        href="{{ asset('assets/vendor/libs/toastr/toastr.css') }}"
        rel="stylesheet">


    <style>
        .success_button,
        .remove_button {
            border: none;
            margin-bottom: 1rem;
            position: absolute;
            top: -15px;
            left: -7px;
            background: transparent;
        }
        /* .success_button {
            color: #0cb10c;


        }
        .remove_button {
            color: rgb(138, 18, 18);
        } */
    </style>
@endsection
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        @include('inc.breadcrumb', [
            'breadcrumb_items' => [
                __('messages.Home') => route('home'),
                __('messages.Shows') => route('admin.admins.index'),
               $show_date->show->name =>null ,

                __('messages.Booking') => 'active',
            ],
        ])


        <div class="row">
            <div class="col-xl-6 mb-5">
                <div class="card">
                    <h5 class="card-header">
                        حجز فى تاريخ
                        {{ \Carbon\Carbon::parse($show_date->date_time)->format('Y-m-d') }}
                        الساعه
                        {{ \Carbon\Carbon::parse($show_date->date_time)->format('h:i A') }}
                        فئة ال
                        {{ $group->name }}
                    </h5>
                    <div class="card-body" >



                        <form action="{{ route('admin.bookings.create') }}" method="POST" id="form_submit">
                            @csrf
                            <input type="hidden" name="show_date_id" value="{{ $show_date_id }}">
                            <input type="hidden" name="category_id" value="{{ $category_id }}">
                            <div class="col-12 col-lg-12 mb-4 mb-xl-0 ">
                                <div class="demo-inline-spacing mt-3">
                                    <div class="list-group border border-dark p-3 d-none"  id="invoice_data">



                                        <div class="row mt-3">
                                            <div class="col-12">
                                                <div class="d-flex justify-content-between">
                                                    <span>الاجمالى : <span class="total_invoice h3">  </span> LE</span>
                                                    <button type="submit" class="btn rounded-pill btn-label-primary waves-effect">
                                                        {{ __('messages.Save and print') }}
                                                    </button>

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

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


                            @foreach ($seats_all as $key => $val)
                                <div class="row mt-4 border border-dark p-3 rounded">
                                    <div class="col-12 mb-4">
                                        <div class="d-flex justify-content-center">
                                            <span class="badge badge-center rounded-pill bg-primary">{{ $key }}</span>
                                        </div>
                                    </div>
                                    @foreach ($val->groupBy("section") as $sub_key => $sub_val)

                                        <div class="col-12  mb-5 border border-dark p-3 rounded">
                                            <div class="row">
                                                <div class="col-12 mb-3">
                                                   <span class="bg-dark  rounded px-3"> {{ $key }}  -  {{ $sub_key }}</span>
                                               </div>
                                            </div>
                                            <div class="row">
                                                @foreach ($sub_val as  $item)

                                                <div class="col-md-2 mb-1 col-3 mt-3 position-relative">

                                                    <button   class="btn_remove_chair {{ in_array($item->id , $seats_remove) ? 'success_button' : 'remove_button' }}  "   @if (in_array($item->id , $seats_remove)) title = "اتاحة للحجز"  @else  title="الغاء الاتاحة"  @endif type="button" data-show_date_id="{{ $show_date->id }}" data-group_id="{{ $category_id  }}" data-seat_id="{{ $item->id }}" >
                                                        @if (in_array($item->id , $seats_remove))
                                                            <i class="ti ti-circle-check text-success"></i>
                                                        @else
                                                        <i class="ti ti-xbox-x text-danger"></i>

                                                        @endif
                                                    </button>
                                                    <div
                                                        class="form-check custom-option custom-option-icon {{ in_array($item->id, $ids_seats_booking) ? 'border border-danger' : '' }} " @if(in_array($item->id , $seats_remove)) style="background: #6c4b4b;" @endif>
                                                        <label class="form-check-label custom-option-content "
                                                            for="seat_{{ $item->id }}">
                                                            <span class="custom-option-body"
                                                                style="{{ in_array($item->id, $ids_seats_booking) ? 'text-decoration:line-through ' : '' }}">{{ $item->seat_num }}</span>
                                                            <input name="seats[]" data-seat_num="{{ $item->seat_num }}" data-row_name="{{ $key }}" data-section="{{ $item->section }}" value="{{ $item->id }}" class="form-check-input" type="checkbox"
                                                                id="seat_{{ $item->id }}" @checked(in_array($item->id, $ids_seats_booking))
                                                                @disabled(in_array($item->id, $ids_seats_booking))>
                                                        </label>
                                                    </div>
                                                </div>
                                            @endforeach

                                            </div>
                                        </div>

                                    @endforeach
                                </div>
                            @endforeach
                        </form>



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



            <div class="col-xl-6 ">
                <div class="card">
                    <h5 class="card-header"></h5>
                    <div class="card-body" >
                        sss
                    </div>
                </div>
            </div>
        </div>


    @endsection
    @section('script')
        <script src="{{ asset("assets/vendor/libs/toastr/toastr.js") }}"></script>
      @include('admin.bookings.inc.script_price_invoice')
        @include('admin.bookings.inc.script_submit_invoice')


        <script>
            $(function(){
                $(".btn_remove_chair").click(function(){
                    var show_date_id=$(this).data("show_date_id");
                    var group_id=$(this).data("group_id");
                    var seat_id=$(this).data("seat_id");


                    var data = {show_date_id , group_id , seat_id , _token:"{{ csrf_token() }}"};
                    $.ajax({
                        url:"{{ route('admin.bookings.remove_seat') }}",
                        method:"POST",
                        data,
                        success:function(res){
                            window.location.href = window.location.href
                            console.log(res)
                        },
                        error:function(res){
                            toastr["error"]("حدث خطا ما ")
                        }
                    })
                })
            })
        </script>
    @endsection