@extends('layouts.app')

@section('styles')
@endsection

@section('content')
    @php
        $content_page_name = 'Packages';
         $content_page_name_single = 'Packages';
    @endphp

    <!-- PAGE-HEADER -->
    <div class="page-header">
        <h1 class="page-title">{{ $content_page_name }}</h1>
        <div>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ $content_page_name }}</li>
            </ol>
        </div>
    </div>
    <!-- PAGE-HEADER END -->

    <!-- ROW-1 OPEN -->
    @canany(['homebanner-create', 'homebanner-edit'])
        <div class="row">
            <div class="col-lg-12 col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title"><span id="content_page_form_action_name">Add</span> {{ $content_page_name }}</h3>
                    </div>
                    <div class="card-body">
                        <form method="POST" id="createForm" class="myform" enctype="multipart/form-data">
                            <input id="csrf_token" type="hidden" value="{{ csrf_token() }}">
                            <input id="row_id" name="row_id" type="hidden" value="">
                            <input id="method" name="_method" type="hidden" value="POST">
                            @csrf
                            <div class="form-row">

                                <div class="col-xl-4 mb-3">
                                    <label for="client_name"> Place *</label>
                                    <input  type="text" class="form-control" name="place" id="place" value="" required>

                                </div>
                                <div class="col-xl-4 mb-3">
                                    <label for="client_name"> Place in arabic*</label>
                                    <input  type="text" class="form-control" name="place_ar" id="place" value="" required>

                                </div>
                                <div class="col-xl-4 mb-3">
                                    <label for="client_designation">Address *</label>
                                    <input type="text" class="form-control" name="address" id="address" value="" required>

                                </div>
                                 <div class="col-xl-4 mb-3">
                                    <label for="client_designation">Address in arabic*</label>
                                    <input type="text" class="form-control" name="address_ar" id="address" value="" required>

                                </div>

                                <div class="col-xl-4 mb-3">
                                    <label for="client_designation">Price *</label>
                                    <input type="text" class="form-control" name="price" id="price" value="" required>

                                </div>

                                 <div class="col-xl-4 mb-3">
                                    <label for="client_designation">Price in arabic*</label>
                                    <input type="text" class="form-control" name="price_ar" id="price" value="" required>

                                </div>



                                 <div class="col-xl-4 mb-3">
                                    <label for="client_designation">Number of days *</label>
                                    <input type="text" class="form-control" name="number_of_days" id="number_of_days" value="" required>

                                   </div>

                                 <div class="col-xl-4 mb-3">
                                    <label for="client_designation">Number of nights *</label>
                                    <input type="text" class="form-control" name="number_of_nights" id="number_of_nights" value="" required>

                                </div>

                                 <div class="col-xl-4 mb-3">
                                    <label for="client_designation">Url Slug *</label>
                                    <input type="text" class="form-control" name="url_slug" id="url_slug" value="" required>

                                </div>

                                   <div class="col-xl-4 mb-3">
                                    <label for="status">Status</label>
                                    <select class="form-control" name="status" id="status" required>
                                        <option value="1">Active</option>
                                        <option value="0">Inactive</option>
                                    </select>
                                </div>

                                  <!-- <div class="col-xl-4 mb-3">
                                    <label for="client_image">Main Package Image (<span
                                            id="client_image_size">{{ env('PACKAGE_IMAGE_SIZE') }}</span>)</label>
                                    <input type="file" class="form-control custom-input-file image_upload" name="main_package_image" id="main_package_image"  required value="">
                                    <input type="image" class="image_upload_preview" id="img_preview"  style="width:100px; height:100px" src="{{asset('no_image.jpg')}}"/>
                                </div> -->



                                 <div class="col-xl-4 mb-3">
                                    <label for="client_image">Multiple Package Image (<span
                                            id="client_image_size">{{ env('PACKAGE_IMAGE_SIZE') }}</span>)</label>
                                    <input type="file" class="form-control custom-input-file image_upload" name="package_image[]" id="package_image" multiple required value="">
                                    <input type="image" class="image_upload_preview" id="img_preview"  style="width:100px; height:100px" src="{{asset('no_image.jpg')}}"/>
                                </div>
                                 <!-- <div class="col-xl-4 mb-3">
                                        <label for="client_image_alt">Package Image Alt *</label>
                                    <input  type="text" class="form-control" name="package_image_alt" id="package_image_alt" value="" required>

                                </div> -->

                               



                          </div>


                 

                            <div class="row">
            <div class="col-lg-12 col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title"><span id="content_page_form_action_name">Add</span> Overview</h3>
                    </div>
                                   <div class="card-body">


                                    <div class="">
                                    <button type="button" onclick="addTextbox()" class="add-button btn btn-light">+</button>
                                    <button type="button" onclick="removeTextbox()" class="remove-button btn  btn-danger">-</button>
                                    </div>


                               
                                 <div class="form-row">
                                 <div class="col-xl-4 mb-3">
                                    <label for="client_designation">Place *</label>
                                    <input type="text" class="form-control" name="overview_place[]" id="overview_place" value="" required>

                                </div>

                                 <div class="col-xl-4 mb-3">
                                    <label for="client_designation">Place in arabic*</label>
                                    <input type="text" class="form-control" name="overview_place_ar[]" id="overview_place" value="" required>

                                </div>


                                <div class="col-xl-4 mb-3">
                                    <label for="client_testimonial">Description  </label>
                                    <textarea  type="text" class="form-control" name="description[]" id="description" value="" required></textarea>
                                </div>


                                   <div class="col-xl-4 mb-3">
                                    <label for="client_testimonial">Description  in arabic </label>
                                    <textarea  type="text" class="form-control" name="description_ar[]" id="description" value="" required></textarea>
                                </div>

                                  <div class="col-xl-4 mb-3">
                                    <label for="client_image">Overview Package Image (<span
                                            id="client_image_size">{{ env('PACKAGE_OVERVIEWIMAGE_SIZE') }}</span>)</label>
                                    <input type="file" class="form-control custom-input-file image_upload" name="overview_image[]" id="overview_image" required value="">
                                    <input type="image" class="image_upload_preview" id="img_preview"  style="width:100px; height:100px" src="{{asset('no_image.jpg')}}"/>
                                </div>
                                </div>

                                <div id="append_id">
                                 



                                </div>



                                </div>
                                </div>
                                </div>
                                </div>
                            @can('homebanner-create')
                                <a id="create_btn" href="#"
                                    onclick="createOrUpdate('{{ route('packages.store') }}','POST', 'createForm', '', 'table_datatable','')"
                                    class="btn custom-btn-success"><i class="fa fa-save"></i> Save</a>
                            @endcan
                            @can('homebanner-edit')
                                <a id="update_btn" style="display: none" href="#"
                                    onclick="createOrUpdate('{{ route('packages.update','id') }}','PUT' , 'createForm', '', 'table_datatable','')"
                                    class="btn custom-btn-success"><i class="fa fa-save"></i> Update</a>
                            @endcan
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endcanany
    <!-- /ROW-1 CLOSED -->


   


@endsection
@section('scripts')
    {{-- ################################Jquery Datatable########################### --}}
    {{-- <script src="{{asset('assets/jquery-datatable/jquery.min.js')}}"></script> --}}
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/jquery-datatable/jquery.dataTables.css?v3') }}">
    <script src="{{ asset('assets/jquery-datatable/jquery.dataTables.js') }}"></script>







    <!--##################################Color Picker Section#############################-->

    <!-- TIMEPICKER JS -->
    <script src="{{ asset('assets/plugins/time-picker/jquery.timepicker.js') }}"></script>
    <script src="{{ asset('assets/plugins/time-picker/toggles.min.js') }}"></script>

    <!-- DATEPICKER JS -->
    <script src="{{ asset('assets/plugins/date-picker/date-picker.js') }}"></script>
    <script src="{{ asset('assets/plugins/date-picker/jquery-ui.js') }}"></script>
    <script src="{{ asset('assets/plugins/input-mask/jquery.maskedinput.js') }}"></script>

    <!-- FORMELEMENTS JS -->
    <script src="{{ asset('assets/js/formelementadvnced.js') }}"></script>
    <script src="{{ asset('assets/js/form-elements.js?v10') }}"></script>

    <!--##################################End Of Color Picker Section#############################-->



    {{-- ########################################################################## --}}
    <script>
        var token = $("meta[name=csrf-token]").attr("content");
        var datatable_name = "table_datatable";
        $('#table_datatable').DataTable({
            "responsive": true,
            "serverSide": true,
            "ordering": true,
            "searching": true,
            "bLengthChange": true,
            "info": false,
            "bSort": true,
            "order": [
                [0, 'desc']
            ],
            "columnDefs": [{
                    "defaultContent": "-",
                    "targets": "_all"
                },
                {
                    "className": "text-center",
                    "targets": [0, 1,2, 3, 4, 5 , 6]
                },
                {
                    "className": "text-left",
                    "targets": []
                }

            ],
            "displayLength": 10,
            "ajax": {
                "url": "{{route('packages.index')}}",
                "type": "get",
                "data": function(data) {
                    data._token = token;

                    return data;

                }
            },
            "AutoWidth": true,


            "fnCreatedRow": function(nRow, aData, iDataIndex) {
                var info = this.dataTable().api().page.info();
                var page = info.page;
                var length = info.length;
                var index = (page * length + (iDataIndex + 1));
                var action = "";

                /////attribute setting
                var jsonObject = JSON.parse(aData.attributes);
                var row_id = aData.id;

                $('td:eq(0)', nRow).html(index);
                $('td:eq(1)', nRow).html(jsonObject.client_name);
                $('td:eq(2)', nRow).html(jsonObject.client_designation);

                $('td:eq(4)', nRow).html(jsonObject.client_image_alt);


                if (aData.image == "" || aData.image == null) {
                    aData.image = "no_image.png";
                }
                var image = '<a href="/' + aData.image + ' " target="_blank"><img style="width:102px; height:46px" src="/' + aData
                    .image + '"></a>';

                $('td:eq(3)', nRow).html(image);


                ////status
                var status = aData.status;
                if(status == 1)
                {
                    var status_htl = '<span style="color:green;font-weight:bolder" class="">Active</span>';
                }
                else{
                    var status_htl = '<span style="color:red;font-weight:bolder" class="">In Active</span>';
                }
                $('td:eq(5)', nRow).html(status_htl);
                //Edit Action

                    var action = action + '&nbsp;<a href="{{route('packages.edit','+ jsonObject.client_name +')}}"><button title="Edit"   type="button" class="btn btn-sm custom-btn-info"><span class="fe fe-edit"> </span></button></a>';

                //Delete Action

                    var action = action + '&nbsp;<button title="Delete" onclick="delete_modal(' + row_id +
                        ')" id="bDel" type="button" class="btn  btn-sm custom-btn-danger"><span class="fe fe-trash-2"> </span></button>';


                $('td:eq(6)', nRow).html(action);




            }
        });

        // #################### Edit Section ############################
        function edit(id) {
            var temp_url = "{{route('packages.edit',"temp_id")}}";
            temp_url = temp_url.replace("temp_id", id);

            $.ajax({
                type: 'GET',
                data: {
                    "_token": token,
                    "id": id
                },
                url : temp_url ,
                success: function(result) {

                    //////set image sections
                    if('image' in result)
                    {
                    $('#client_image').attr('required', false);
                    $('#img_preview').attr('src', '/'+  result.image);
                    }


                    /////set status
                    if('status' in result)
                    {

                        if(result.status == 1)
                        {
                            $('#status').val('1');

                        }
                        else{
                            $('#status').val('0');

                        }
                    }

                    if('attributes' in result)
                    {
                        var jsonData = JSON.parse(result.attributes);

                        for (var key in jsonData) {
                            var id = "#" + key;
                            var value = jsonData[key];

                            if ($(id).length) {
                                $(id).val(value);
                            }
                        }
                    }
                    $('#method').val('PUT');
                    $('#content_page_form_action_name').text('Edit')
                    // $('#banner_id').val(result.data.s_id);
                    // $('#slider_name').val(result.data.s_title);
                    // $('#slider_url').val(result.data.s_link);
                    // $('#slider_desc').val(result.data.s_desc);

                    var route = "{{ route('packages.update', '') }}";

                    var updatedRoute = route + '/' + result.id

                    $('#update_btn').attr('onclick', "createOrUpdate('" + updatedRoute +
                        "', 'POST', 'createForm', '', 'table_datatable', '')");



                    $('#create_btn').hide();
                    $('#update_btn').show();
                    $('#back-to-top').click();

                }
            })
        }
        // #################### End Of Edit Section ####################
        // #################### Delete Section ##########################
        function delete_modal(id) {
            $('#row_id').val(id);
            $('#smallmodal').modal('show');
        }

        function delete_item() {
            var id = $('#row_id').val();

             var route = "{{ route('packages.destroy', '') }}";

            var updatedRoute = route + '/' + id

            $.ajax({
                type: 'DELETE',
                data: {
                    "_token": token,
                    "id": id
                },
                url: updatedRoute,
                success: function(result) {
                    $('#smallmodal').modal('hide');
                    toast(result, datatable_name);
                }
            })
        }
        // #################### End Of Delete Section ##################


        //End Of Slider Type Change Function



      function addTextbox() {
      const container = document.getElementById('append_id');
      const newGroup = document.createElement('div');
        newGroup.className = 'form-group1';
      newGroup.innerHTML = `<div class="form-row">
                                 <div class="col-xl-4 mb-3">
                                  <label for="client_designation">Place *</label>
                                    <input type="text" class="form-control" name="overview_place[]" id="overview_place" value="" required>

                                </div>

                                 <div class="col-xl-4 mb-3">
                                  <label for="client_designation">Place in arabic*</label>
                                    <input type="text" class="form-control" name="overview_place_ar[]" id="overview_place" value="" required>

                                </div>

                                <div class="col-xl-4 mb-3">
                                  <label for="client_designation">Description  *</label>
                                    <textarea  type="text" class="form-control" name="description[]" id="description" value="" required></textarea>
                                </div>

                                 <div class="col-xl-4 mb-3">
                                           <label for="client_designation">Description in arabic *</label>
                                    <textarea  type="text" class="form-control" name="description_ar[]" id="description" value="" required></textarea>
                                </div>


                                  <div class="col-xl-4 mb-3">
                                    <input type="file" class="form-control custom-input-file image_upload" name="overview_image[]" id="overview_image[]" required value="">
                                    <input type="image" class="image_upload_preview" id="img_preview"  style="width:100px; height:100px" src="{{asset('no_image.jpg')}}"/>
                                </div>
                                </div>`;
      container.appendChild(newGroup);
    }

      function removeTextbox() {
   
      const container = document.getElementById('append_id');
      const groups = container.getElementsByClassName('form-group1');
     
      if (groups.length >= 1) {
        container.removeChild(groups[groups.length - 1]);
      } 
    }

        
    </script>
@endsection