@extends('backend.layouts_backend.master')

@section('title')
    Add Tour
@endsection

@section('extra_styles')
    <style>
        /* multiple photo upload - environmental activities css */
        .imagePreview {
            width: 100%;
            height: 300px;
            background-position: center center;
            background: url(http://cliquecities.com/assets/no-image-e3699ae23f866f6cbdf8ba2443ee5c4e.jpg);
            background-color: #fff;
            background-size: cover;
            background-repeat: no-repeat;
            1 display: inline-block;
            box-shadow: 0px -3px 6px 2px rgba(0, 0, 0, 0.2);
        }

        .btn-primary {
            display: block;
            border-radius: 0px;
            box-shadow: 0px 4px 6px 2px rgba(0, 0, 0, 0.2);
            margin-top: -5px;
        }

        .imgUp {
            margin-bottom: 15px;
        }

        .del {
            width: 80px;
            height: 40px;
            padding-top: 3px;
            padding-left: 8px;
            padding-right: 8px;
            background-color: #f60909;
            color: #ffffff;
            box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
            text-align: center;
            line-height: 30px;
            margin-top: 0px;
            cursor: pointer;
            font-size: 15px;
        }

        .imgAdd {
            width: 40px;
            height: 40px;
            padding-top: 3px;
            border-radius: 50%;
            background-color: #4bd7ef;
            color: #fff;
            box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
            text-align: center;
            line-height: 30px;
            margin-top: 0px;
            cursor: pointer;
            font-size: 15px;
        }

        .dell {
            width: 40px;
            height: 40px;
            padding-top: 3px;
            border-radius: 50%;
            background-color: #ca078c;
            color: #fff;
            box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
            text-align: center;
            line-height: 30px;
            margin-top: 0px;
            cursor: pointer;
            font-size: 15px;
        }

        /* end of multiple photo upload - environmental activities css */
    </style>
@endsection

@section('content')
    <!-- Main content dashboard  -->
    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0 font-size-18">Add Tours</h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">Dashboard</a></li>
                                <li class="breadcrumb-item active">Add ammenities</li>
                            </ol>
                        </div>

                    </div>
                </div>
            </div>
            <!-- end page title -->

            <!-- Page content starts here -->



            <!-- Form -->


            <div class="row">
                <div class="col-md-2 col-xl-1">

                </div>

                <div class="col-md-2 col-xl-10">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Add Tour</h4>
                            <!-- <p class="card-title-desc">Add Category</p> -->
                        </div>


                        <div class="card-body">
                            <form action="{{ route('tours.store') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="row">

                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label class="form-label" for="validationCustom01">Tour
                                                Name</label>
                                            <input type="text" class="form-control" id="validationCustom01"
                                                name="name" placeholder="Enter tour name" value="">
                                            <div>
                                                @error('name')
                                                    <small class="text-danger"> {{ $message }}</small>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label class="form-label" for="validationCustom01">
                                                Destination</label>
                                            <input type="text" class="form-control" id="validationCustom01"
                                                name="destination" placeholder="Enter destination" value="">
                                            <div>
                                                @error('destination')
                                                    <small class="text-danger"> {{ $message }}</small>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label" for="validationCustom01">Start Date</label>
                                                    <input type="date" class="form-control" id="validationCustom01"
                                                        name="start_date" placeholder="Enter  start date" value="">
                                                    <div>
                                                        @error('start_date')
                                                            <small class="text-danger"> {{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label" for="validationCustom01">End Date</label>
                                                    <input type="date" class="form-control" id="validationCustom01"
                                                        name="end_date" placeholder="Enter  end date" value="">
                                                    <div>
                                                        @error('end_date')
                                                            <small class="text-danger"> {{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label" for="validationCustom01">Tour
                                                        Category</label>

                                                    <select name="tour_category_id" class="form-select">
                                                        @foreach ($tour_categories as $tour_category)
                                                            <option value="{{ $tour_category->id }}">
                                                                {{ $tour_category->name }}</option>
                                                        @endforeach
                                                    </select>

                                                    <div>
                                                        @error('tour_category_id')
                                                            <small class="text-danger"> {{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label" for="validationCustom01">Featured
                                                        Photo</label>
                                                    <input type="file" class="form-control" name="featured_photo"
                                                        id="⁠⁠featured_photo" placeholder="">
                                                    <div>
                                                        @error('⁠⁠featured_photo')
                                                            <small class="text-danger"> {{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>



                                        </div>


                                    </div>

                                    {{-- start  multiple column --}}
                                    <div class="col-md-12">
                                        <div class="row">
                                            {{-- col-1 --}}
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label" for="validationCustom01">Single tour
                                                        cost</label>
                                                    <input type="number" class="form-control" id="validationCustom01"
                                                        name="tour_single_cost"
                                                        placeholder="Enter  number of tour_single_cost" value="">
                                                    <div>
                                                        @error('tour_single_cost')
                                                            <small class="text-danger"> {{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            {{-- col-2 --}}
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label" for="validationCustom01">Couple tour
                                                        cost</label>
                                                    <input type="number" class="form-control" id="validationCustom01"
                                                        name="tour_couple_cost" placeholder="Enter couple tour cost"
                                                        value="">
                                                    <div>
                                                        @error('tour_couple_cost')
                                                            <small class="text-danger"> {{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {{-- end multiple column --}}

                                    {{-- start  multiple column --}}
                                    <hr>
                                    <div class="col-md-12">
                                        <div class="row">
                                            {{-- col-1 --}}
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label" for="validationCustom01">Tour
                                                        Status</label>
                                                    <div class="form-check form-check-inline">
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" name="tour_status"
                                                                type="radio" id="tour_status"
                                                                {{ old('active') == '1' ? 'checked' : '' }}
                                                                value="1">
                                                            <label class="form-check-label"
                                                                for="tour_status">Active</label>
                                                        </div>
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" name="tour_status"
                                                                type="radio" id="tour_status"
                                                                {{ old('unavailable') == '0' ? 'checked' : '' }}
                                                                value="0">
                                                            <label class="form-check-label" for="tour_status">In
                                                                Active</label>
                                                        </div>
                                                        {{-- validation --}}
                                                        @error('tour_status')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror

                                                    </div>
                                                </div>
                                            </div>
                                            {{-- col-2 --}}
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label" for="validationCustom01">Tour Booking
                                                        availability</label>
                                                    <div class="form-check form-check-inline">
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" name="booking_status"
                                                                type="radio" id="booking_status"
                                                                {{ old('available') == '1' ? 'checked' : '' }}
                                                                value="1">
                                                            <label class="form-check-label"
                                                                for="booking_status">Available</label>
                                                        </div>
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" name="booking_status"
                                                                type="radio" id="booking_status"
                                                                {{ old('booked') == '0' ? 'checked' : '' }}
                                                                value="0">
                                                            <label class="form-check-label" for="booking_status">Fully
                                                                booked </label>
                                                        </div>
                                                        {{-- validation --}}
                                                        @error('booking_status')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- end multiple column --}}


                                    </div>
                                    <hr>
                                    {{-- end multiple column --}}




                                    {{-- itenaries --}}
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <div class="card-header  bg-primary" style=" color:#ffffff;">
                                                ADD ITENARY ( ADD MULTIPLE )

                                            </div>
                                            <hr>

                                            {{-- <div id="rowsContainerItenary">
                                                <div class="row mb-2">
                                                    <div class="col-md-2">
                                                        <input type="number" class="form-control"
                                                            name="itenary[0][day_number]" placeholder="Add day" required>
                                                    </div>
                                                    <div class="col-md-2">
                                                        <input type="time" class="form-control"
                                                            name="itenary[0][time]" placeholder="Add time" required>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <input type="text" class="form-control"
                                                            name="itenary[0][description]" placeholder="Add description"
                                                            required>
                                                    </div>

                                                    <div class="col-md-2">
                                                        <button type="button" class="btn btn-danger"
                                                            onclick="removeRow(this)">Remove Itenary</button>
                                                    </div>
                                                </div>
                                            </div>

                                            <button type="button" class="btn btn-success" onclick="addRow()">Add
                                                ITENARY</button> --}}


                                            <table
                                                class="table color-table inverse-table table-responsive table-borderless"
                                                id="tour_itenaries_details_table">
                                                <thead class="thead-light">
                                                    <th>Day Number</th>
                                                    <th>Time</th>
                                                    <th>Description</th>
                                                    <th></th>
                                                </thead>
                                                <tbody id="tour_itenaries_data">
                                                    <tr>
                                                        <td>
                                                            <input type="number" class="form-control"
                                                                name="itenary_day_number[]" placeholder="Add day"
                                                                id="itenary_day_number_1" required>
                                                        </td>
                                                        <td style="min-width: 90px;">
                                                            <div class="input-group">
                                                                <input type="time" class="form-control"
                                                                    name="itenary_time[]" placeholder="Add time"
                                                                    id="itenary_time_1" required>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <input type="text" class="form-control"
                                                                name="itenary_description[]" placeholder="Add description"
                                                                id="itenary_description_1" required>
                                                        </td>
                                                        <td></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                          
                                            <button type="button" id="add_tour_itenaries_1"
                                                class="btn btn-success add_tour_itenaries_button label label-inverse"
                                                onclick="add_tour_itenary_row('tour_itenaries_details_table','tour_itenaries_data')">Add
                                                Itenary</button>

                                            {{-- <button type="button" class="btn btn-success" onclick="addRow()">Add Itenary</button>  --}}



                                        </div>
                                    </div>



                                    {{-- activities --}}
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <div class="card-header  bg-primary" style=" color:#ffffff;">
                                                ADD ACTIVITY ( ADD MULTIPLE )

                                            </div>
                                            <hr>

                                            {{-- activity add --}}
                                            <div id="rowsContainerActivity">
                                                <div class="row mb-2">
                                                    <div class="col-md-10">
                                                        <input type="text" class="form-control"
                                                            name="tour_activities[]" placeholder="Add activity name"
                                                            required>
                                                    </div>


                                                    <div class="col-md-2">
                                                        <button type="button" class="btn btn-danger"
                                                            onclick="removeRowActivity(this)">Remove Activity</button>
                                                    </div>
                                                </div>
                                            </div>

                                            <button type="button" class="btn btn-success" onclick="addRowActivity()">Add
                                                ACTIVITY</button>

                                            {{-- end itenary add --}}


                                        </div>
                                    </div>

                                    {{-- Tour includes and excludes --}}
                                    {{-- tour includes --}}
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <div class="card-header  bg-primary" style=" color:#ffffff;">
                                                TOUR INCLUDES ( ADD MULTIPLE )

                                            </div>
                                            <hr>

                                            <div id="rowsContainerIncludes">
                                                <div class="row mb-2">
                                                    <div class="col-md-8">
                                                        <input type="text" class="form-control" name="tour_includes[]"
                                                            placeholder="Include " required>
                                                    </div>
                                                    <div class="col-md-2">
                                                        <button type="button" class="btn btn-danger"
                                                            onclick="removeRowIncludes(this)">Remove</button>
                                                    </div>
                                                </div>
                                            </div>

                                            <button type="button" class="btn btn-success" onclick="addRowIncludes()">Add
                                                Include</button>
                                            {{-- end itenary add --}}


                                        </div>

                                    </div>

                                    {{-- tour excludes --}}
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <div class="card-header  bg-primary" style=" color:#ffffff;">
                                                TOUR EXCLUDES ( ADD MULTIPLE )

                                            </div>
                                            <hr>

                                            <div id="rowsContainerExcludes">
                                                <div class="row mb-2">
                                                    <div class="col-md-8">
                                                        <input type="text" class="form-control" name="tour_excludes[]"
                                                            placeholder="Exclude" required>
                                                    </div>
                                                    <div class="col-md-2">
                                                        <button type="button" class="btn btn-danger"
                                                            onclick="removeRowExcludes(this)">Remove</button>
                                                    </div>
                                                </div>
                                            </div>

                                            <button type="button" class="btn btn-success" onclick="addRowExcludes()">Add
                                                Exclude</button>
                                            {{-- end itenary add --}}


                                        </div>

                                    </div>


                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label" for="validationCustom01">3D Video Link
                                                (Youtube)</label>
                                            <input type="text" class="form-control" id="validationCustom01"
                                                name="video_url" placeholder="Enter video link from youtube"
                                                value="http://www.youtube.com/embed/replace_with_video_id">
                                            <div>
                                                @error('video_url')
                                                    <small class="text-danger"> {{ $message }}</small>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label" for="validationCustom01">Slots available </label>
                                            <input type="number" class="form-control" id="validationCustom01"
                                                name="slots_available" placeholder="Slots avialable"
                                                value="http://www.youtube.com/embed/replace_with_video_id">
                                            <div>
                                                @error('slots_available')
                                                    <small class="text-danger"> {{ $message }}</small>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>


                                    <hr>
                                    {{-- end multiple column --}}


                                    {{-- photo library upload --}}

                                    <div class="card" style="margin-top:20px; padding-top:10px;">
                                        <div class="card-header bg-primary" style=" color:#ffffff;">
                                            Add tours photos gallery

                                        </div>
                                        <div class="card-body">

                                            {{-- validation --}}
                                            @error('photo_library')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror

                                            <div class="row" style="margin-top:40px;">
                                                <div class="col-md-6 imgUp">
                                                    <div class="imagePreview"></div>
                                                    <label class="btn btn-primary">
                                                        Add Photo
                                                        <input type="file" name="photo_library[]"
                                                            class="uploadFile img" value="Upload Photo"
                                                            style="width: 0px;height: 0px;overflow: hidden;">

                                                        {{-- caption --}}

                                                    </label>
                                                    {{-- <input type="text" name="photo_library_photo_caption[]" placeholder="Caption for each photo" multiple class="form-control"> --}}

                                                </div><!-- col-2 -->
                                                <i class="bi bi-plus-lg imgAdd">

                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                        fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
                                                        <path fill-rule="evenodd"
                                                            d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2" />
                                                    </svg>
                                                </i>

                                            </div>


                                        </div>
                                    </div>

                                    {{-- end of photo library upload --}}

                                    {{-- description --}}

                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label class="form-label" for="validationCustom01">Description</label>

                                            <textarea class="form-control" name="description" id="exampleFormControlTextarea5"
                                                placeholder="Describe the tour" rows="3"></textarea>
                                            <div>
                                                @error('description')
                                                    <small class="text-danger"> {{ $message }}</small>
                                                @enderror
                                            </div>
                                        </div>

                                    </div>


                                    <!-- Editor -->




                                    <button class="btn btn-primary" type="submit">Add Tour</button>
                            </form>
                        </div>
                    </div>
                    <!-- end card -->
                </div> <!-- end col -->

            </div>
            <!-- end row -->

            <div class="col-md-2 col-xl-1">

            </div>










        </div>
        <!-- container-fluid -->
    </div>
@endsection

@section('extra_scripts')
    {{-- add itenary row  and delete itenary row --}}
    {{-- <script src="{{ asset('assets/backend_assets/assets/js/tours/itenaries_add_remove_row.js') }}"></script> --}}


    {{-- add activity row  and delete activity row --}}
    {{-- <script src="{{ asset('assets/backend_assets/assets/js/tours/activities_add_remove_row.js') }}"></script> --}}

    {{-- add tour activity --}}
    <script>
        var rowCounterActivity = 0;

        function addRowActivity() {
            rowCounterActivity++;

            var newRowActivity = `
    <div class="row mb-2">
        <div class="col-md-10">
            <input type="text" class="form-control" name="tour_activities[]" placeholder="Add Activity ${rowCounterActivity + 1}" required>
        </div>
       
        <div class="col-md-2">
            <button type="button" class="btn btn-danger" onclick="removeRowActivity(this)">Remove Activity</button>
        </div>
    </div>
`;

            $('#rowsContainerActivity').append(newRowActivity);
        }

        function removeRowActivity(button) {
            $(button).closest('.row').remove();
        }
    </script>


    {{-- tour excludes , add and remove rows --}}
    <script src="{{ asset('assets/backend_assets/assets/js/tours/tour_excludes_add_remove_row.js') }}"></script>

    {{-- tour includes , add and remove rows --}}
    <script src="{{ asset('assets/backend_assets/assets/js/tours/tour_includes_add_remove_row.js') }}"></script>


    {{-- multiple photo upload - environmental activities script --}}
    <script src="{{ asset('assets/backend_assets/assets/js/tours/multple_photo_upload.js') }}"></script>

    {{-- select 2 --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" defer></script>


    {{-- add tour itenary row --}}
    <script>
        function add_tour_itenary_row(table_id, body_id) {
            var id = document.getElementById(table_id).rows.length + 1;
            if (body_id == 'tour_itenaries_data') {
                $('#tour_itenaries_data').append(`
                    <tr>
                       <td>
                           <input type="number" class="form-control" name="itenary_day_number[]" placeholder="Add day" id="itenary_day_number_${id}"  required>
                       </td>
                       <td style="min-width: 90px;">
                           <div class="input-group">
                               <input type="time" class="form-control" name="itenary_time[]" placeholder="Add time" id="itenary_time_${id}" required>
                           </div>
                       </td>
                       <td>                            
                           <input type="text" class="form-control"  name="itenary_description[]" placeholder="Add description" id="itenary_description_${id}"  required>
                       </td> 
                       <td>
                           <button onclick="deleteItenaryRow(this)" class="btn btn-sm btn-rounded btn-danger" title="Delete this row" style="color: white;" type="button"><i class="fa fa-trash"></i></button>
                        </td>                        
                   </tr>



               
               `);
            }

        }

        /* delete tour itenary row */
        function deleteItenaryRow(ele) {
            ele.parentNode.parentNode.remove();
        }
    </script>
@endsection