@extends('layouts.app')

@section('content')
    <div class="row">
        <div class="col-sm-12 col-lg-12 offset-lg-12">
            <div class="card mb-4">
                <div class="card-header"><strong>{{ $pageName??'' }}</strong></div>
                <div class="card-body">
                    <div class="tab-content rounded-bottom">

                        @if ($errors->any())
                            <div class="alert alert-danger alert-dismissible fade show"role="alert">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                                <button class="btn-close" type="button" data-coreui-dismiss="alert" aria-label="Close"></button>
                            </div>
                        @endif


                        <form method="POST" action="{{ url('tour') }}" enctype="multipart/form-data">
                            @csrf
                            <div class="tab-pane p-3 active preview" role="tabpanel" id="preview-719">
                                <div class="row">
                                    <div class="col-sm-12 col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="name">Title <span class="text-danger">*</span></label>
                                            <input class="form-control form-control-sm" name="name" id="name" value="{{ old('name') }}" type="text" placeholder="Required">
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="date">Date <span class="text-danger">*</span></label>
                                            <input class="form-control form-control-sm" name="date" id="date" value="{{ old('date') }}" type="date" placeholder="Required">
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="to_date">To Date <span class="text-danger">*</span></label>
                                            <input class="form-control form-control-sm" name="to_date" id="to_date" value="{{ old('to_date') }}" type="date" placeholder="Required">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12 col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="no_of_adult">No of Adult <span class="text-danger">*</span></label>
                                            <input class="form-control form-control-sm" name="no_of_adult" id="no_of_adult" value="{{ old('no_of_adult') }}" type="number" placeholder="Required">
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="no_of_children">No of Children <span class="text-danger">*</span></label>
                                            <input class="form-control form-control-sm" name="no_of_children" id="no_of_children" value="{{ old('no_of_children') }}" type="number" placeholder="Required">
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="no_of_infant">No of Infant <span class="text-danger">*</span></label>
                                            <input class="form-control form-control-sm" name="no_of_infant" id="no_of_infant" value="{{ old('no_of_infant') }}" type="number" placeholder="Required">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12 col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="duration">Duration <span class="text-danger">*</span></label>
                                            <input class="form-control form-control-sm" name="duration" id="duration" value="{{ old('duration') }}" type="text" placeholder="Required">
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="name">Address <span class="text-danger">*</span></label>
                                            <input class="form-control form-control-sm" name="address" id="address" value="{{ old('address') }}" type="text" placeholder="Required">
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="city">City <span class="text-danger">*</span></label>
                                            <select name="city" class="form-control form-control-sm chosen-select" data-placeholder="Select">
                                                <option value=""></option>
                                                @if(count($city) > 0)
                                                    @foreach($city as $city)
                                                        <option value="{{ $city->id }}">{{ $city->name??'' }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-12 col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="country">Country <span class="text-danger">*</span></label>
                                            <select id="country" name="country" class="form-control form-control-sm chosen-select" data-placeholder="select">
                                                <option value=""></option>
                                                @if(count($country) > 0)
                                                    @foreach($country as $country)
                                                        <option value="{{ $country->id }}">{{ $country->name??'' }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-sm-12 col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="name">Discount (%) </label>
                                            <input class="form-control form-control-sm" name="discount" id="discount" type="number" value="{{ old('discount') }}" step="any" placeholder="Required">
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="status">Images</label>
                                            <input type="file" class="form-control form-control-sm" name="images[]" multiple>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mt-4">
                                    <div class="col-12">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th style="width: 30%;">Package Name</th>
                                                    <th style="width: 20%;">Adult Price</th>
                                                    <th style="width: 20%;">Children Price</th>
                                                    <th style="width: 20%;">Infant Price</th>
                                                    <th style="width: 10%;">
                                                        <button class="btn btn-info text-light btn-sm add_row" style="float: right">
                                                            <svg class="icon">
                                                                <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-medical-cross') }}">
                                                                </use>
                                                            </svg>
                                                        </button>
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody class="pricing shadow-sm bg-body">
                                                <tr class="item_row_1">
                                                    <td>
                                                        <select name="details[1][package]" id="package" class="form-control form-control-sm chosen-select" data-placeholder="chosen-select">
                                                            @if(count($packages) > 0)
                                                                @foreach($packages as $package)
                                                                    <option value="{{ $package->id??'' }}">{{ $package->name??'' }}</option>
                                                                @endforeach
                                                            @endif
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <input type="number" step="any" name="details[1][adult_price]" class="form-control form-control-sm" placeholder="Required" value="0">
                                                    </td>
                                                    <td>
                                                        <input type="number" step="any" name="details[1][children_price]" class="form-control form-control-sm" placeholder="Required" value="0">
                                                    </td>
                                                    <td>
                                                        <input type="number" step="any" name="details[1][infant_price]" class="form-control form-control-sm" placeholder="Required" value="0">
                                                    </td>
                                                    <td>
                                                        <button class="btn btn-danger text-light btn-sm details_remove" data-id="1" style="float: right">
                                                            <svg class="icon">
                                                                <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-trash') }}">
                                                                </use>
                                                            </svg>
                                                        </button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-12 col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="itinerary">Itinerary</label>
                                            <textarea name="itinerary" id="itinerary"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="cancellation_policy">Cancellation Policy</label>
                                            <textarea name="cancellation_policy" id="cancellation_policy"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="included_service">Included Service</label>
                                            <textarea name="included_service" id="included_service"></textarea>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-12 col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="excluded_service">Excluded Service</label>
                                            <textarea name="excluded_service" id="excluded_service"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="highlights">Highlights</label>
                                            <textarea name="highlights" id="highlights"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="general_condition">General Condition</label>
                                            <textarea name="general_condition" id="general_condition"></textarea>
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <button type="submit" class="btn btn-info text-light btn-sm m-1" style="float: right">
                                        <svg class="icon">
                                            <use
                                                xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-task') }}">
                                            </use>
                                        </svg>
                                        Save
                                    </button>

                                    <a href="{{ route('category.index') }}" class="btn btn-warning text-light btn-sm m-1"  style="float: right">
                                        <svg class="icon">
                                            <use
                                                xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-x') }}">
                                            </use>
                                        </svg>
                                        Cancel
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        CKEDITOR.replace('itinerary');
        CKEDITOR.replace('cancellation_policy');
        CKEDITOR.replace('included_service');
        CKEDITOR.replace('excluded_service');
        CKEDITOR.replace('highlights');
        CKEDITOR.replace('general_condition');

        let i = 1;
        $(document).on('click', '.add_row', function(e){
            e.preventDefault();
            i++;
            $('.pricing').append(`
                <tr class="item_row_${i}">
                    <td>
                        <select name="details[${i}][package]" id="package" class="form-control form-control-sm chosen-select package" data-placeholder="chosen-select">
                            @if(count($packages) > 0)
                                @foreach($packages as $package)
                                    <option value="{{ $package->id??'' }}">{{ $package->name??'' }}</option>
                                @endforeach
                            @endif
                        </select>
                    </td>
                    <td>
                        <input type="number" step="any" name="details[${i}][adult_price]" class="form-control form-control-sm" placeholder="Required" value="0">
                    </td>
                    <td>
                        <input type="number" step="any" name="details[${i}][children_price]" class="form-control form-control-sm" placeholder="Required" value="0">
                    </td>
                    <td>
                        <input type="number" step="any" name="details[${i}][infant_price]" class="form-control form-control-sm" placeholder="Required" value="0">
                    </td>
                    <td>
                        <button class="btn btn-danger text-light btn-sm details_remove" data-id="${i}" style="float: right">
                            <svg class="icon">
                                <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-trash') }}">
                                </use>
                            </svg>
                        </button>
                    </td>
                </tr>`);

            $('.package').trigger("chosen:updated");
            $('.package').chosen();

            $('.details_remove').on('click', function(){
                let data_id = $(this).attr('data-id');
                $('.item_row_'+data_id).remove();
            });
        });


        $('.details_remove').on('click', function(){
            let data_id = $(this).attr('data-id');
            $('.item_row_'+data_id).remove();
        });

    </script>
@endsection