@extends('layouts.app')

@section('stitle', __('messages.tables'))
@section('title', __('messages.section'))

@section('content')
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper container-xxl p-0">
            <div class="content-header row">
                <div class="content-header-left col-md-6 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <h2 class="content-header-title float-left mb-0"> {{ ucfirst( $section->name ) }}</h2>
                            <div class="breadcrumb-wrapper">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item">
                                        <span style="font-size: 20px"> Tables </span>
                                        <i data-feather="star" class="mr-25"></i>
                                        @if ($section->active =='1')
                                            <span class="badge badge-pill badge-primary text-center ">Active</span>
                                        @else
                                          <span class="badge badge-pill  badge-danger text-center ">Inactive</span>
                                        @endif

                                    </li>
                                </ol>
                            </div>
{{--                            <h2 class="mb-0">   </h2>--}}
                        </div>
                    </div>
                </div>
                <div class="content-header-right text-md-right col-md-6 col-12 d-md-block d-none">
                    @include('branch.branch_menu')
                </div>
            </div>
            <div class="content-body">
                <!-- Table Hover Animation start -->
                <div class="row" id="table-hover-animation">
                    <div class="col-12">
                        <div class="card">
                            <table class="section-table table">
                                <thead>
                                    <th> {{__('messages.name')}}</th>
                                    <th> {{__('messages.seats')}}</th>
                                    <th>{{__('messages.created_at')}}</th>
                                    <th>{{__('messages.STATUS')}}</th>
                                    <th>{{__('messages.ACTION')}}</th>
                                </thead>
                                <tbody>
                                @foreach($data as $table)
                                    <tr>
                                        <td> {{ $table->name}} </td>
                                        <td> {{ $table->no_of_seats}} </td>
                                        <td> {{ $table->created_at}} </td>
                                        @if ($table->active =='1')
                                            <td><span class="badge badge-pill badge-primary text-center ">Active</span></td>
                                        @else
                                            <td><span class="badge badge-pill  badge-danger text-center ">Inactive</span></td>
                                        @endif
                                        <td>
                                            <a class="mr-1 edit_button" data-toggle="modal" data-active="{{ $table->active }}" data-table_id="{{ $table->id }}" data-target="#table_edit" data-placement="top" title="" data-original-title="{{__('messages.Edit')}}">
                                                <i data-feather='edit' class="text-secondary"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                            <nav aria-label="Page navigation example">
                                <ul class="pagination justify-content-end mt-2">
                                    {{$data->links()}}
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-size-md d-inline-block">

        <!--- Add Tables Modal ---->
        <div class="modal fade text-left section-modal" id="table_add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel17" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-md" role="document">
                <div class="modal-content">
                    <form class="dt_adv_search" method="POST">
                        <div class="modal-header">
                            <h4 class="modal-title" id="myModalLabel17"> {{ __('messages.add_table') }}</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-12">
                                    <div class="form-row mb-1">
                                        <div class="col-md-12 mb-1">
                                            <label>  {{ __('messages.name') }} :</label>
                                            <input type="text" name="table_name" id="table_name"  class="form-control dt-input table_name" data-column="3"  data-column-index="2" />
                                        </div>
                                        <div class="col-md-12 mb-1">
                                            <label> {{ __('messages.seats') }}:</label>
                                            <input type="number" name="num_of_seats" id="num_of_seats" class="form-control dt-input num_of_seats" data-column="3"  data-column-index="2" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary" onclick="addTable({{$section->id}})" data-dismiss="modal">
                                {{__('messages.Apply')}}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- table Edit Modal -->
        <div class="modal fade text-left section-modal" id="table_edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel17" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-md" role="document">
                <div class="modal-content">
                    <form class="dt_adv_search" method="POST">
                        <div class="modal-header">
                            <h4 class="modal-title" id="myModalLabel17"> {{ __('messages.edit_table') }}</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-12">
                                    <div class="form-row mb-1">
                                        <div class="col-md-12 mb-1">
                                            <label>  {{ __('messages.name') }} :</label>
                                            <input type="text" name="edit_table_name" id="edit_table_name"  class="form-control dt-input edit_table_name" data-column="3"  data-column-index="2" />
                                        </div>
                                        <div class="col-md-12 mb-1">
                                            <label> {{ __('messages.seats') }}:</label>
                                            <input type="number" name="edit_number_of_seat" id="edit_number_of_seats" class="form-control dt-input edit_number_of_seats" data-column="3"  data-column-index="2" />
                                        </div>
                                        <div class="col-md-12 mb-1" >
                                            <div class="col-md-12 mb-1">
                                                <div class="custom-control custom-switch custom-switch-success">
                                                    <p class="mb-50">{{__('messages.STATUS')}}</p>
                                                    <input type="checkbox" value="1"  class="custom-control-input" name="status" id="customSwitch111"  />
                                                    <label class="custom-control-label" for="customSwitch111">
                                                        <span class="switch-icon-left"><i data-feather="check"></i></span>
                                                        <span class="switch-icon-right"><i data-feather="x"></i></span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <input type="hidden" name="edit_table_id" id="edit_table_id" class="form-control edit_table_id"   />

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary" onclick="updateTable()" data-dismiss="modal">
                                {{__('messages.Apply')}}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- table Section Edit -->
        <div class="modal fade text-left section-modal" id="section_edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel17" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-md" role="document">
                <div class="modal-content">
                    <form class="dt_adv_search" method="POST">
                        <div class="modal-header">
                            <h4 class="modal-title" id="myModalLabel17"> {{ __('messages.edit_section') }}</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-12">
                                    <div class="form-row mb-1">
                                        <div class="col-md-12 mb-1">
                                            <label>  {{ __('messages.name') }} :</label>
                                            <input type="text" name="section_name" id="section_name"  class="form-control dt-input section_name" data-column="3"  data-column-index="2" />
                                        </div>
                                        <div class="col-md-12 mb-1">
                                            <div class="custom-control custom-switch custom-switch-success">
                                                <p class="mb-50">{{__('messages.STATUS')}}</p>
                                                <input type="checkbox" value="{{$section->active}}" {{$section->active== 1 ? 'checked':''}} class="custom-control-input" name="status" id="customSwitch000"  />
                                                <label class="custom-control-label" for="customSwitch000">
                                                    <span class="switch-icon-left"><i data-feather="check"></i></span>
                                                    <span class="switch-icon-right"><i data-feather="x"></i></span>
                                                </label>
                                            </div>
                                        </div>
                                        <input type="hidden" name="section_id" id="section_id" class="form-control section_id "   />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary" onclick="updateSection()" data-dismiss="modal">
                                {{__('messages.Apply')}}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>



@endsection
@push('my_scripts')
    <script>
        function notNull(){
            Swal.fire({
                title: 'Error!',
                text: 'Invalid Input Action!',
                icon: 'error',
                customClass: {
                    confirmButton: 'btn btn-primary'
                },
                showClass: {
                    popup: 'animate__animated animate__shakeX'
                },
                buttonsStyling: false
            });
        }
        function editSection(id){
            let section_id = $(".section_id");
            let section_name = $("#section_name");
            const method = 'POST';
            const url = "{{ route('branch.get_section_data') }}";
            const headers = {
                'X-CSRF-TOKEN': $('input[name="_token"]').val()
            };
            const data = {
                sectionId : id
            }
            $.ajax({
                method,
                url,
                headers,
                data, // data to be sent to server
                dataType: 'json', // type of data expecting back from server
                success: function (data) {
                    section_name.val(data.name); // Select the value with a record
                    section_id.val(data.id);
                },
                error: function (data) {
                    console.log(data);
                }
            });
        }

        function updateSection(){
          let  checkBox = document.getElementById("customSwitch000");
          let active ;
          if(checkBox.checked == true){
             active = 1;
          }else{
              active = 0;
          }
            let section_id = $(".section_id").val();
            let name = $(".section_name").val();
            if(name == ""){
                notNull();
                return false;

            }
            const method = 'POST';
            const url = "{{ route('branch.update_section_data') }}";
            const headers = {
                'X-CSRF-TOKEN': $('input[name="_token"]').val()
            };
            const data = {
                sectionId : section_id,
                name : name,
                active : active
            }
            $.ajax({
                method,
                url,
                headers,
                data, // data to be sent to server
                dataType: 'json', // type of data expecting back from server
                success: function (data) {
                    console.log(data);
                    Swal.fire({
                        icon: 'success',
                        title: `${data.status}`,
                        text: `${data.message}`,
                    });
                    location.reload();

                },
                error: function (data) {
                    console.log(data);
                }
            });
        }

        function addTable(id){
            let section_id = id;
            let name = $("#table_name").val();
            let seats = parseInt($("#num_of_seats").val());
            if(name == ""){
                notNull();
                return false;
            }
            if(seats == null){
                notNull();
                return false;
            }
            if(isNaN(seats)){
                notNull();
                return false;

            }
            // let seats = $("#num_of_seats").val();
            const url = "{{ route('branch.section_add_table') }}";
            const method = "POST";
            const headers = {
                'X-CSRF-TOKEN': $('input[name="_token"]').val()
            };
            const data = {
                sectionId : section_id,
                name : name,
                seats : seats,
            }
            $.ajax({
                method,
                url,
                headers,
                data, // data to be sent to server
                dataType: 'json', // type of data expecting back from server
                success:function (data){
                    // console.log(data);
                    Swal.fire({
                        icon: 'success',
                        title: `${data.status}`,
                        text: `${data.message}`,
                    });
                    location.reload();
                },
                error: function (data) {
                    console.log(data);
                }
            });
        }

        $("#table-hover-animation").on('click', '.edit_button', function () {
            let active = $(this).attr("data-active");
            let table_id = $(this).attr("data-table_id");
            let table = $(".edit_table_id");
            let table_name = $("#edit_table_name");
            let active_input = $("#customSwitch111")
            let seats = $("#edit_number_of_seats");
            const method = 'POST';
            const url = "{{ route('branch.section_get_table') }}";
            const headers = {
                'X-CSRF-TOKEN': $('input[name="_token"]').val()
            };
            const data = {
                tableId : table_id
            }
            $.ajax({
                method,
                url,
                headers,
                data, // data to be sent to server
                dataType: 'json', // type of data expecting back from server
                success: function (data) {
                    console.log(data);
                    table_name.val(data.name); // Select the value with a record
                    seats.val(data.no_of_seats);
                    table.val(data.id);
                    active_input.val(data.active);
                    if(data.active == 1){
                        document.getElementById("customSwitch111").checked = true;
                    }else{
                        document.getElementById("customSwitch111").checked = false;

                    }
                },
                error: function (data) {
                    console.log(data);
                }
            });
        });
        function updateTable(){
        let table_id = $(".edit_table_id").val();
        let name = $(".edit_table_name").val();
        let seats = $(".edit_number_of_seats").val();
        let  checkBox = document.getElementById("customSwitch111");
        let active;
        if(checkBox.checked == true){
            active = 1;
        }else{
            active = 0;
        }
        if(name == ""){
                notNull();
                return false;

        }
        if(seats == null){
                notNull();
                return false;
        }
        const method = 'POST';
        const url = "{{ route('branch.section_update_table') }}";
        const headers = {
            'X-CSRF-TOKEN': $('input[name="_token"]').val()
        };
        const data = {
            tableId : table_id,
            name : name,
            seats : seats,
            active :active
        }
        $.ajax({
            method,
            url,
            headers,
            data, // data to be sent to server
            dataType: 'json', // type of data expecting back from server
            success: function (data) {
                console.log(data);
                Swal.fire({
                    icon: 'success',
                    title: `${data.status}`,
                    text: `${data.message}`,
                });
                location.reload();
            },
            error: function (data) {
                console.log(data);
            }
        });
    }
    </script>
@endpush