@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.shows.index'),
                $show_date->show->name => route('admin.shows.show', $show_date->show->id),

                __('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">
                                            <input type="hidden" id="show_taxes" value="{{ $show_taxes }}">
                                            {{-- <input type="hidden" id="show_taxes_fixed" value="{{ $show_taxes_fixed }}"> --}}
                                            {{-- <div class="col-12">يتم اضافة {{ $show_taxes }} % ضرائب</div> --}}
                                            <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">

                                                        @if (in_array($item->id, $seats_allow_cancel))
                                                            <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>
                                                        @endif
                                                        <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">
                        <img class="border border-warning rounded"
                            src="{{ asset('assets/plans/' . $show->hall_id . '.png') }}" alt="">
                    </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 hall_id = "{{ $show->hall_id }}";


                    var data = {
                        show_date_id,
                        group_id,
                        seat_id,
                        _token: "{{ csrf_token() }}",
                        hall_id
                    };
                    $.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