@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('event', $data->id) }}" enctype="multipart/form-data">
                            @csrf
                            @method('PATCH')

                            <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">Name <span class="text-danger">*</span></label>
                                            <input class="form-control form-control-sm" name="name" id="name" value="{{ old('name', $data->name??'') }}" type="text" placeholder="Required">
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-2">
                                        <div class="form-group">
                                            <label class="form-label" for="type">Type <span class="text-danger">*</span></label>
                                            <select name="type" class="form-control form-control-sm chosen-select" data-placeholder="Select">
                                                <option value=""></option>
                                                @if(count($type) > 0)
                                                    @foreach($type as $typeItem)
                                                        <option value="{{ $typeItem->id }}" @if($typeItem->id == $data->type) selected @endif>{{ $typeItem->name??'' }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-sm-12 col-md-3">
                                        <div class="form-group">
                                            <label class="form-label" for="start_date">Start Date <span class="text-danger">*</span></label>
                                            <input class="form-control form-control-sm" name="start_date" id="start_date" value="{{ old('start_date', $data->start_date??'') }}" type="datetime-local" placeholder="Required">
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-3">
                                        <div class="form-group">
                                            <label class="form-label" for="end_date">End Date <span class="text-danger">*</span></label>
                                            <input class="form-control form-control-sm" name="end_date" id="end_date" value="{{ old('end_date', $data->end_date??'') }}" type="datetime-local" 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="name">Address <span class="text-danger">*</span></label>
                                            <input class="form-control form-control-sm" name="address" id="address" value="{{ old('address', $data->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 }}" @if($city->id == $data->city) selected @endif>{{ $city->name??'' }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                    <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 }}" @if($country->id == $data->country) selected @endif>{{ $country->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="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', $data->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', $data->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', $data->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="name">Discount (%)</label>
                                            <input class="form-control form-control-sm" name="discount" id="discount" type="number" value="{{ old('discount', $data->discount??'') }}" step="any" placeholder="Required">
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="name">Status</label>
                                            <select name="publish_status" id="publish_status" class="form-control">
                                                <option value="1" @if($data->publish_status == 1) Selected @endif>Public</option>
                                                <option value="2" @if($data->publish_status == 2) Selected @endif>Private</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-12 col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="payment_method">Payment Method</label>
                                            <select name="payment_method" id="payment_method" class="form-control">
                                                <option value="Online" @if($data->payment_method == 'Online') Selected @endif>Online</option>
                                                <option value="Offline" @if($data->payment_method == 'Offline') Selected @endif>Offline</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                     <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>

                                <br>
                                <div class="row">
                                    @php
                                        $eventImages = json_decode($data->images);
                                    @endphp

                                    @if(count($eventImages) > 0)
                                        @foreach($eventImages as $image)
                                            <div class="col-sm-3 col-md-2 {{ explode(".", $image)[0] }}">
                                                <div class="card">
                                                    <div class="card-header">
                                                        <button class="btn btn-danger text-light btn-sm delete-image" type="button" data-id="{{ $data->id }}" model="Event\Event" field="images" image="{{ $image }}" file_path="backend\assets\img\event\" style="float: right">
                                                            <svg class="icon">
                                                                <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-trash') }}">
                                                                </use>
                                                            </svg>
                                                        </button>
                                                    </div>
                                                    <div class="card-body">
                                                        <img src="{{ asset('backend/assets/img/event/'.$image) }}" alt="" width="100%">
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>

                                <input type="hidden" name="" class="details_row" value="{{ count($data->details) }}">

                                <div class="row mt-4">
                                    <div class="col-12">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th style="width: 30%;">Package Name</th>
                                                    <th style="width: 40%;">Description</th>
                                                    <th style="width: 20%;">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">
                                                @if(count($data->details) > 0)
                                                    @foreach($data->details as $key => $details)
                                                        @php
                                                            $key += 1;
                                                        @endphp
                                                        <tr class="item_row_{{ $key }}">
                                                            <td>
                                                                <input type="hidden" name="details[{{ $key }}][id]" value="{{ $details->id??'' }}" id="">
                                                                <select name="details[{{ $key }}][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??'' }}"  @if($package->id == $details->package) selected @endif>{{ $package->name??'' }}</option>
                                                                        @endforeach
                                                                    @endif
                                                                </select>
                                                            </td>
                                                            <td>
                                                                <input type="text" name="details[{{ $key }}][description]" class="form-control form-control-sm" placeholder="Required" value="{{ $details->description??0 }}">
                                                            </td>
                                                            <td>
                                                                <input type="number" step="any" name="details[{{ $key }}][price]" class="form-control form-control-sm" placeholder="Required" value="{{ $details->price??0 }}">
                                                            </td>
                                                            <td>
                                                                <a href="{{ url('room-delete', $details->id) }}" class="btn btn-danger text-light btn-sm details_remove" style="float: right">
                                                                    <svg class="icon">
                                                                        <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-trash') }}">
                                                                        </use>
                                                                    </svg>
                                                                </a>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                @endif

                                            </tbody>
                                        </table>
                                    </div>
                                </div>


                                <div class="row">
                                    <div class="col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <label class="form-label" for="description">Description</label>
                                            <textarea name="description" id="description">{!! $data->description??'' !!}</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('description');

        let i = 1;
        $(document).on('click', '.add_row', function(e){
            e.preventDefault();
            i++;
            $('.pricing').append(`
                <tr class="item_row_${i}">
                    <td>
                        <input type="hidden" name="details[${i}][id]" value="0" id="">
                        <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}][description]" class="form-control form-control-sm" placeholder="Required" value="0">
                    </td>
                    <td>
                        <input type="number" step="any" name="details[${i}][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>`);



            $('.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