@extends('staff::layouts.default')
@section('title',trans('admin_default.seat_management'))

@section('breadcrumb')
    <li class="active"><a href="#">{{trans('admin_default.seat_management')}}</a></li>
@endsection

@section('style')

    <style type="text/css">
        .float-right {
            float: right;
        }

        .small-pdd-top {
            padding-top: 8px;
        }

        .small-mrg-top {
            margin-top: 20px;
        }

        .small-mrg-bot {
            margin-bottom: 5px !important;
        }

        .no-padding-left {
            padding-left: 0;
        }

        .no-mrg-bottom {
            margin-bottom: 0;
        }

        table tr th {
            font-size: 13px;
        }

        table tr td {
            font-size: 12px;
        }

        /*the container must be positioned relative:*/
        .autocomplete {
            position: relative;
            display: inline-block;
        }

        .autocomplete-items {
            position: absolute;
            border: 1px solid #d4d4d4;
            border-bottom: none;
            border-top: none;
            z-index: 99;
            /*position the autocomplete items to be the same width as the container:*/
            top: 100%;
            left: 0;
            right: 0;
        }

        .autocomplete-items div {
            padding: 10px;
            cursor: pointer;
            background-color: #fff;
            border-bottom: 1px solid #d4d4d4;
        }

        /*when hovering an item:*/
        .autocomplete-items div:hover {
            background-color: #e9e9e9;
        }

        /*when navigating through the items using the arrow keys:*/
        .autocomplete-active {
            background-color: DodgerBlue !important;
            color: #ffffff;
        }

        .full-width {
            width: 100%;
        }

        .seat-management {
            /*max-width: 100%;*/
            /*width: 100%;*/
            /*overflow-x: scroll;*/
        }
    </style>
@endsection

@section('content')

    <div class="content-wrapper">
        <div class="panel panel-white border-top-success">
            <div class="panel-heading">
                <h5 class="panel-title text-bold">
                    <i class="icon-menu7 position-left"></i>
                    {{trans('admin_default.seat_management')}}
                </h5>
            </div>
            <div class="panel-body">
                <!-- form -->
                <form class="form-horizontal" method="GET" id="frmList" action="{!! url()->current(); !!}">

                    <div class="row">
                        <div class="col-sm-2">
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <select class="form-control select-group" name="group_name">
                                        <option value="all">{{"All Group"}}</option>
                                        @foreach($group_list as $k => $v)
                                            <option value="{{$v}}"
                                                    @if($v==$group_name) selected="selected" @endif>{{$v}}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <a href="#" class="btn btn-primary btn-add-block">
                                <i class="icon-pencil7 position-left"></i>
                                {!! trans('admin_default.add_block') !!}
                            </a>
                        </div>
                    </div>
                    <div class="small-mrg-top">
                        @foreach($blocks as $block)
                            @php
                                $property = json_decode($block->property, true);
                                $json_info = array();
                                $json_info['id'] = $block->id;
                                $json_info['group_name'] = $block->group_name;
                                $json_info['name'] = $block->name;
                                $json_info['order'] = $block->order;
                                $json_info['property'] = $property;
                                $json_info = json_encode($json_info);
                            @endphp
                            <div class="row small-mrg-top">
                                <div class="col-sm-6">
                                    @php
                                        $seats_count = $property["number_of_row"] * $property['number_of_seat_per_row'];
                                    @endphp
                                    <strong>
                                        {{$block->name}}
                                        -
                                        (
                                        <span class="text-capitalize">{{trans("admin_default.rows")}}: {{@$property['number_of_row']}},</span>
                                        <span class="text-capitalize">{{ trans('admin_default.seats_per_row') }}: {{@$property['number_of_seat_per_row']}},</span>
                                        <span class="text-capitalize">
                                            {{trans('admin_default.seats')}}: {{$seats_count}}
                                        </span>
                                        )
                                    </strong>
                                    @if(!empty($src))
                                        <a href="{{$src}}" target="_blank">(View Picture)</a>
                                    @endif
                                </div>
                                <div class="col-sm-6 text-right">
                                    <a href="#" data-info="{{ $json_info }}" class="btn-edit">
                                        <i class="icon-pencil7"></i>
                                    </a>
                                    <a href="#" class="btn-delete text-danger" data-id="{{$block->id}}"
                                       data-url="{!! url($shop_package . '/delete-block') !!}">
                                        <i class="icon-trash"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="seat-management table-responsive">
                                <table class="table table-bordered table-xlg ">
                                    <tbody>
                                        @foreach($block->rows as $rowKey => $row)
                                            @if($rowKey == 0)
                                                <tr>
                                                    <td style="width: 10%;">
                                                        <div style="width: 10rem; margin: 0 auto;">
                                                            <select class="form-control mark-status-seat"
                                                                    data-block-id="{{$block->id}}">
                                                                <option value="">Select</option>
                                                                <option value="0">
                                                                    {{ trans('admin_default.mark_available') }}
                                                                </option>
                                                                <option value="1">
                                                                    {{ trans('admin_default.mark_block') }}
                                                                </option>
                                                            </select>
                                                        </div>
                                                    </td>
                                                    @foreach($row->seats as $key => $column)
                                                        <td class="text-center">
                                                            <div style="width: 10rem; margin: 0 auto;">
                                                                <select class="form-control change-block-columns"
                                                                        data-block-id="{{$block->id}}"
                                                                        data-key="{{$key}}">
                                                                    <option value="">Select</option>
                                                                    <option value="0">
                                                                        {{ trans('admin_default.mark_available') }}
                                                                    </option>
                                                                    <option value="1">
                                                                        {{ trans('admin_default.mark_block') }}
                                                                    </option>
                                                                </select>
                                                            </div>
                                                        </td>
                                                    @endforeach
                                                </tr>
                                            @endif

                                            <tr>
                                                @foreach($row->seats as $key => $seat)
                                                    @if($key == 0)
                                                        <td>
                                                            <div style="width: 10rem; margin: 0 auto;">
                                                                <select class="form-control change-block-rows"
                                                                        id="block-col-{{$block->id}}-{{ $key }}">
                                                                    <option value="">Select</option>
                                                                    <option value="0">
                                                                        {{ trans('admin_default.mark_available') }}
                                                                    </option>
                                                                    <option value="1">
                                                                        {{ trans('admin_default.mark_block') }}
                                                                    </option>
                                                                </select>
                                                            </div>
                                                        </td>
                                                    @endif

                                                    <td class="text-center">
                                                        {{$seat->number}} <br>
                                                        @php
                                                            if($seat->status)
                                                                $statusClassName = 'text-success';
                                                            else
                                                                $statusClassName = 'text-danger';
                                                        @endphp
                                                        <button type="button" data-seat-id="{{ $seat->id }}"
                                                                data-status="{{ $seat->status }}"
                                                                class="{{$statusClassName}} btn-link btn-update-seat col-{{$block->id}}-{{$key}} seats-{{$block->id}}">
                                                                <span id="seat-status-{{$seat->id}}">
                                                                    @if($seat->status)
                                                                        {{ trans('admin_default.available') }}
                                                                    @else
                                                                        {{ trans('admin_default.block') }}
                                                                    @endif
                                                                </span>
                                                        </button>
                                                    </td>
                                                @endforeach
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @endforeach
                    </div>
                </form>
            </div>
        </div>
    </div>

    <form id="hidden-form" action="" method="POST" style="display: none;">
        {!! csrf_field() !!}
        <input type="hidden" id="hidden-form-id" name="hidden_form_id" value="">
    </form>

    @include('staff::seat.modal')
@endsection

@section('script')
    <script type="text/javascript">
        $(function () {

            const modal = $('#block-modal');

            const strActionModal = $('.str-action');
            // reset input fields
            const hiddenBlockId = $('#hidden_block_id');
            const standSelect = $('#stand_name');
            const nameInput = $('.name');
            const numberOfRowInput = $('.number_of_row');
            const numberOfSeatPerRow = $('.number_of_seat_per_row');
            const seatPrefixInput = $('.seat_prefix');

            // select-group
            $('.select-group').on('change', function () {
                var me = $(this),
                    val = me.val();
                $('#frmList').submit();
            });

            // btn add block
            $('.btn-add-block').click(function (e) {
                e.preventDefault();
                var me = $(this);
                strActionModal.text(' Add New ');

                // reset input fields
                hiddenBlockId.val(0);
                standSelect.val(null);
                nameInput.val(null);
                numberOfSeatPerRow.val(null);
                numberOfRowInput.val(null);
                seatPrefixInput.val(null);
                modal.modal('show');
            });

            // btn edit block
            $('.btn-edit').click(function (e) {
                e.preventDefault();
                const blocks = $(this).data('info');
                console.log(blocks);

                strActionModal.text('Update ');
                hiddenBlockId.val(blocks.id);

                // reset input fields
                standSelect.val(blocks.group_name).trigger('change');
                nameInput.val(blocks.name);
                numberOfSeatPerRow.val(blocks.property.number_of_seat_per_row);
                numberOfRowInput.val(blocks.property.number_of_row);
                seatPrefixInput.val(blocks.property.seat_prefix);
                modal.modal('show');
            });

            // delete button
            $('.btn-delete').click(function (event) {
                event.preventDefault();
                var me = $(this),
                    id = me.data('id'),
                    url = me.data('url'),
                    message = "{{trans('admin_default.are_you_sure_you_want_to_delete')}} ? ";
                $('div#confirm-modal').find('#msg').text(message);
                $('div#confirm-modal').modal('show');
                $('form#hidden-form').attr('action', url);
                $('#hidden-form-id').val(id);
            });

            // confirm
            $('a#yes-confirm').click(function (e) {
                e.preventDefault();
                $('form#hidden-form').submit();
            });

        });
        updateStatusSeat();

        function updateStatusSeat() {
            const btnUpdateStatusSeat = $(".btn-update-seat");
            btnUpdateStatusSeat.on('click', function () {
                const me = $(this);
                const status = $(this).data('status');
                const seat_id = $(this).data("seat-id");
                const labelStatus = $(`#seat-status-${seat_id}`);
                $.ajax({
                    type: 'POST',
                    url: "{!! route('ajax-update-seat-status') !!}",
                    data: {
                        seat_id: seat_id,
                        status: status,
                        '_token': '{{ csrf_token() }}',
                    },
                    success: (response) => {
                        if (response.status) {
                            me.data('status', response.data.status);
                            if (response.data.status) {
                                labelStatus.removeClass('text-danger')
                                    .addClass('text-success')
                                    .text('{{ trans('admin_default.available') }}');
                            } else {
                                labelStatus.removeClass('text-success')
                                    .addClass('text-danger')
                                    .text('{{ trans('admin_default.block') }}');
                            }
                        }
                    }
                });
            });
        }
    </script>

    @parent

    @include('staff::seat.change-status-script')
@endsection