@extends('voyager::master')

@section('page_title', __('voyager::generic.'.(isset($dataTypeContent->id) ? 'edit' : 'add')).' '.$dataType->getTranslatedAttribute('display_name_singular'))

@section('css')
    <link rel="stylesheet" href="{{asset('css/selectize.css')}}">

    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        .error {
            color: red;
            font-size: 1rem;
            display: block;
            margin-top: 5px;
        }
    </style>
    <style>
        .panel .mce-panel {
            border-left-color: #fff;
            border-right-color: #fff;
        }

        .panel .mce-toolbar,
        .panel .mce-statusbar {
            padding-left: 20px;
        }

        .panel .mce-edit-area,
        .panel .mce-edit-area iframe,
        .panel .mce-edit-area iframe html {
            padding: 0 10px;
            min-height: 350px;
        }

        .mce-content-body {
            color: #555;
            font-size: 14px;
        }

        .panel.is-fullscreen .mce-statusbar {
            position: absolute;
            bottom: 0;
            width: 100%;
            z-index: 200000;
        }

        .panel.is-fullscreen .mce-tinymce {
            height: 100%;
        }

        .panel.is-fullscreen .mce-edit-area,
        .panel.is-fullscreen .mce-edit-area iframe,
        .panel.is-fullscreen .mce-edit-area iframe html {
            height: 100%;
            position: absolute;
            width: 99%;
            overflow-y: scroll;
            overflow-x: hidden;
            min-height: 100%;
        }

        .error {
            color: red;
            font-size: 1rem;
            display: block;
            margin-top: 5px;
        }

        .img-wrap {
            position: relative;
        }

        .image-div {
            position: relative;
        }
        .img-wrap .remove {
            position: absolute;
            top: 2px;
            left: 20px;
            z-index: 100;
        }
    </style>
@stop

@section('page_header')
    <h1 class="page-title">
        <i class="{{ $dataType->icon }}"></i>
        {{ __('voyager::generic.'.(isset($dataTypeContent->id) ? 'edit' : 'add')).' '.$dataType->getTranslatedAttribute('display_name_singular') }}
    </h1>
    @include('voyager::multilingual.language-selector')
@stop

@section('content')
    <div class="page-content container-fluid">
        <form class="form-edit-add" role="form"
              action="@if(!is_null($dataTypeContent->getKey())){{ route('voyager.'.$dataType->slug.'.update', $dataTypeContent->getKey()) }}@else{{ route('voyager.'.$dataType->slug.'.store') }}@endif"
              method="POST" enctype="multipart/form-data" autocomplete="off">
            <!-- PUT Method if we are editing -->
            @if(isset($dataTypeContent->id))
                {{ method_field("PUT") }}
            @endif
            {{ csrf_field() }}

            <div class="row">
                <div class="col-md-8">
                    <div class="panel panel-bordered">
                    {{-- <div class="panel"> --}}
                        @if (count($errors) > 0)
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $key => $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <div class="panel-heading">
                            <h3 class="panel-title">
                                {{ __('voyager::generic.basic_info') }}
                            </h3>
                            <div class="panel-actions">
                                <a class="panel-action voyager-angle-down" data-toggle="panel-collapse" aria-hidden="true"></a>
                            </div>
                        </div>

                        <div class="panel-body">

                            <div class="form-group">
                                <label for="event_name">{{ __('voyager::seeders.data_rows.event_name') }}</label>

                                <input type="text" class="form-control" id="event_name" name="event_name" placeholder="{{ __('voyager::seeders.data_rows.event_name') }}"
                                       value="{{ old('event_name', $dataTypeContent->event_name ?? '') }}">

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

                            <div class="form-group">
                                <label for="street_address">{{ __('voyager::seeders.data_rows.street_address') }}</label>

                                <input type="text" class="form-control" id="street_address" name="street_address" placeholder="{{ __('voyager::seeders.data_rows.street_address') }}"
                                       value="{{ old('street_address', $dataTypeContent->street_address ?? '') }}">

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

                            <div class="form-group">
                                <label for="pin_code">{{ __('voyager::seeders.data_rows.pin_code') }}</label>

                                <input type="text" class="form-control" id="pin_code" name="pin_code" placeholder="{{ __('voyager::seeders.data_rows.pin_code') }}"
                                       value="{{ old('pin_code', $dataTypeContent->pin_code ?? '') }}">

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

                            <div class="form-group">
                                <label for="start_date">{{ __('voyager::seeders.data_rows.start_date') }}</label>

                                <input type="date" class="form-control" id="start_date" name="start_date" placeholder="{{ __('voyager::seeders.data_rows.start_date') }}"
                                       value="{{ old('start_date', $dataTypeContent->start_date ?? '') }}">

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

                            <div class="form-group">
                                <label for="end_date">{{ __('voyager::seeders.data_rows.end_date') }}</label>

                                <input type="date" class="form-control" id="end_date" name="end_date" placeholder="{{ __('voyager::seeders.data_rows.end_date') }}"
                                       value="{{ old('end_date', $dataTypeContent->end_date ?? '') }}">

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

                            <div class="form-group">
                                <label for="description">{{ __('voyager::seeders.data_rows.description') }}</label>

                                <textarea class="form-control" id="description" name="description" placeholder="{{ __('voyager::seeders.data_rows.description') }}">{{ old('description', $dataTypeContent->description ?? '') }}</textarea>

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

                            <div class="form-group">
                                <label for="status">{{ __('voyager::seeders.data_rows.status') }}</label>

                                <select class="form-control select2 @error('status') is-invalid @enderror" name="status">
                                    <option selected disabled>{{ __('voyager::generic.choose_status') }}</option>
                                    @foreach(\App\Models\Event::$status as $status)
                                        <option value="{{ $status }}" {{ (old('status') == $status || $dataTypeContent->status == $status) ? "selected" : "" }}>{{ __('voyager::generic.event_status.'.$status) }}</option>
                                    @endforeach
                                </select>

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

                            <div class="form-group">
                                <label for="company_id">{{ __('voyager::seeders.data_rows.company_id') }}</label>

                                <select class="form-control select2" name="company_id" required>
                                    <option disabled value="" selected>---</option>
                                    @foreach(\App\Models\Company::get() as $company)
                                        <option value="{{ $company->id }}" @if(old('company_id', $dataTypeContent->company_id) == $company->id) selected="selected" @endif>{{ $company->company_name }}</option>
                                    @endforeach
                                </select>

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

                            <div class="form-group">
                                <label for="category_id">{{ __('voyager::seeders.data_rows.category_id') }}</label>

                                <select class="form-control select2" name="category_id" required>
                                    <option disabled value="" selected>---</option>
                                    @foreach(\App\Models\Category::get() as $category)
                                        <option value="{{ $category->id }}" @if(old('category_id', $dataTypeContent->category_id) == $category->id) selected="selected" @endif>{{ $category->name }}</option>
                                    @endforeach
                                </select>

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

                            <div class="form-group">
                                <label for="country_id">{{ __('voyager::seeders.data_rows.country_id') }}</label>

                                <select class="form-control select2" name="country_id" required>
                                    <option disabled value="" selected>---</option>
                                    @foreach(\App\Models\Country::get() as $country)
                                        <option value="{{ $country->id }}" @if(old('country_id', $dataTypeContent->country_id) == $country->id) selected="selected" @endif>{{ $country->name }}</option>
                                    @endforeach
                                </select>

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

                            <div class="form-group">
                                <label for="city_id">{{ __('voyager::seeders.data_rows.city_id') }}</label>

                                <select class="form-control select2" name="city_id" required>
                                    <option disabled value="" selected>---</option>
                                    @foreach(\App\Models\City::get() as $city)
                                        <option value="{{ $city->id }}" @if(old('city_id', $dataTypeContent->city_id) == $city->id) selected="selected" @endif>{{ $city->name }}</option>
                                    @endforeach
                                </select>

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

                        </div>

                    </div>

                </div>

                <div class="col-md-4">
                    <div class="panel panel panel-bordered panel-warning">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                {{ __('voyager::seeders.data_rows.feature_image') }}
                            </h3>
                            <div class="panel-actions">
                                <a class="panel-action voyager-angle-down" data-toggle="panel-collapse" aria-hidden="true"></a>
                            </div>
                        </div>
                        <div class="panel-body">
                            <div class="form-group">
                                @if(isset($dataTypeContent->feature_image))
                                    <img src="{{ filter_var($dataTypeContent->feature_image, FILTER_VALIDATE_URL) ? $dataTypeContent->feature_image : Voyager::image( $dataTypeContent->feature_image ) }}" style="width:200px; height:auto; clear:both; display:block; padding:2px; border:1px solid #ddd; margin-bottom:10px;" />
                                @endif
                                <input type="file" data-name="feature_image" name="feature_image">
                            </div>
                        </div>
                    </div>

                    <div class="panel panel panel-bordered panel-primary">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                {{ __('voyager::seeders.data_rows.location') }}
                            </h3>
                            <div class="panel-actions">
                                <a class="panel-action voyager-angle-down" data-toggle="panel-collapse" aria-hidden="true"></a>
                            </div>
                        </div>
                        <div class="panel-body">
                            <div class="form-group">
                                <input type="text" id="locationInput" placeholder="Click on the map to select location" readonly style="width: 100%; padding: 10px;">
                                <div id="map"></div>
                                <input type="hidden" id="latitude" name="latitude" value="{{ old('latitude', $dataTypeContent->latitude ?? '') }}">
                                <input type="hidden" id="longitude" name="longitude" value="{{ old('longitude', $dataTypeContent->longitude ?? '') }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-primary pull-right save">
                {{ __('voyager::generic.save') }}
            </button>
        </form>
        <div style="display:none">
            <input type="hidden" id="upload_url" value="{{ route('voyager.upload') }}">
            <input type="hidden" id="upload_type_slug" value="{{ $dataType->slug }}">
        </div>
    </div>
@stop

@section('javascript')
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <style>
        #map { height: 400px; width: 100%; }
    </style>
    <script>
        let existingLat = parseFloat(document.getElementById("latitude").value) || 24.7136;
        let existingLng = parseFloat(document.getElementById("longitude").value) || 46.6753;

        const map = L.map('map').setView([existingLat, existingLng], 10);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap contributors'
        }).addTo(map);

        let marker = L.marker([existingLat, existingLng], { draggable: true }).addTo(map);

        function updatePositionInputs(latlng) {
            document.getElementById("latitude").value = latlng.lat;
            document.getElementById("longitude").value = latlng.lng;
            document.getElementById("locationInput").value = `Lat: ${latlng.lat}, Lng: ${latlng.lng}`;
        }

        map.on('click', function(e) {
            marker.setLatLng(e.latlng);
            updatePositionInputs(e.latlng);
        });

        marker.on('dragend', function() {
            updatePositionInputs(marker.getLatLng());
        });

        updatePositionInputs(marker.getLatLng());
    </script>
@stop