@extends('voyager::master')

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

@section('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="display_Name">{{ __('voyager::seeders.data_rows.display_Name') }}</label>

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

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

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

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

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

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

                                <select class="form-control select2-default-obj @error('is_active') is-invalid @enderror" name="is_active">
                                    <option selected disabled>{{ __('voyager::generic.choose_status') }}</option>
                                    <option value="1" {{ (old('is_active') == '1' || $dataTypeContent->user?->is_active == '1') ? "selected" : "" }}>{{ __('voyager::generic.active') }}</option>
                                    <option value="0" {{ (old('is_active') == '0' || $dataTypeContent->user?->is_active == '0') ? "selected" : "" }}>{{ __('voyager::generic.unactivated') }}</option>
                                </select>

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

                            <div class="form-group">
                                <label for="password">{{ __('voyager::generic.password') }}</label>
                                @if(isset($dataTypeContent->user->password))
                                    <br>
                                    <small>{{ __('voyager::profile.password_hint') }}</small>
                                @endif
                                <input type="password" class="form-control" id="password" name="password" value="" autocomplete="new-password">
                            </div>

                        </div>

                    </div>

                    <div class="panel panel panel-bordered panel-dark">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                {{ __('voyager::generic.provider_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="contact_person_name">{{ __('voyager::seeders.data_rows.contact_person_name') }}</label>

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

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

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

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

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

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

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

                                @error('contact_phone')
                                <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">{{ old('description', $dataTypeContent->description ?? '') }}</textarea>

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

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

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

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

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

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

                                @error('type')
                                <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 class="panel panel panel-bordered panel-warning">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                {{ __('voyager::generic.files') }}
                            </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">
                            {{-- freelance_certificate --}}
                            <div class="form-group col-md-12">
                                <label for="freelance_certificate">{{ __('voyager::seeders.data_rows.freelance_certificate') }}</label>
                                @php
                                    $freelance_certificate_file = $dataTypeContent->files->where('type','freelance_certificate')->first();
                                @endphp
                                @if($freelance_certificate_file)
                                    @if($freelance_certificate_file->file_type == "application/pdf")
                                        <object style="max-height: 260px;" data="{{Storage::url($freelance_certificate_file->url)}}" type="application/pdf" width="100%" height="500px">
                                            <p>Unable to display PDF file. <a href="{{Storage::url($freelance_certificate_file->url)}}">Download</a> instead.</p>
                                        </object>
                                    @else
                                        <img src="{{ filter_var($freelance_certificate_file->url, FILTER_VALIDATE_URL) ? $freelance_certificate_file->url : Voyager::image( $freelance_certificate_file->url ) }}" style="width:200px; height:auto; clear:both; display:block; padding:2px; border:1px solid #ddd; margin-bottom:10px;" />
                                    @endif
                                @endif

                                <input type="file" id="freelance_certificate" class="form-control-file @error('files') is-invalid @enderror" name="files[freelance_certificate]" >

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

                        <div class="panel-body">
                            {{-- vat_certificate --}}
                            <div class="form-group col-md-12">
                                <label for="vat_certificate">{{ __('voyager::seeders.data_rows.vat_certificate') }}</label>
                                @php
                                    $vat_certificate_file = $dataTypeContent->files->where('type','vat_certificate')->first();
                                @endphp
                                @if($vat_certificate_file)
                                    @if($vat_certificate_file->file_type == "application/pdf")
                                        <object style="max-height: 260px;" data="{{Storage::url($vat_certificate_file->url)}}" type="application/pdf" width="100%" height="500px">
                                            <p>Unable to display PDF file. <a href="{{Storage::url($vat_certificate_file->url)}}">Download</a> instead.</p>
                                        </object>
                                    @else
                                        <img src="{{ filter_var($vat_certificate_file->url, FILTER_VALIDATE_URL) ? $vat_certificate_file->url : Voyager::image( $vat_certificate_file->url ) }}" style="width:200px; height:auto; clear:both; display:block; padding:2px; border:1px solid #ddd; margin-bottom:10px;" />
                                    @endif
                                @endif

                                <input type="file" id="vat_certificate" class="form-control-file @error('files') is-invalid @enderror" name="files[vat_certificate]" >

                                @error('files.vat_certificate')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="panel-body">
                            {{-- IBAN_certificate --}}
                            <div class="form-group col-md-12">
                                <label for="IBAN_certificate">{{ __('voyager::seeders.data_rows.IBAN_certificate') }}</label>
                                @php
                                    $IBAN_certificate_file = $dataTypeContent->files->where('type','IBAN_certificate')->first();
                                @endphp
                                @if($IBAN_certificate_file)
                                    @if($IBAN_certificate_file->file_type == "application/pdf")
                                        <object style="max-height: 260px;" data="{{Storage::url($IBAN_certificate_file->url)}}" type="application/pdf" width="100%" height="500px">
                                            <p>Unable to display PDF file. <a href="{{Storage::url($IBAN_certificate_file->url)}}">Download</a> instead.</p>
                                        </object>
                                    @else
                                        <img src="{{ filter_var($IBAN_certificate_file->url, FILTER_VALIDATE_URL) ? $IBAN_certificate_file->url : Voyager::image( $IBAN_certificate_file->url ) }}" style="width:200px; height:auto; clear:both; display:block; padding:2px; border:1px solid #ddd; margin-bottom:10px;" />
                                    @endif
                                @endif

                                <input type="file" id="IBAN_certificate" class="form-control-file @error('files') is-invalid @enderror" name="files[IBAN_certificate]" >

                                @error('files.IBAN_certificate')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="panel-body">
                            {{-- company_profile --}}
                            <div class="form-group col-md-12">
                                <label for="company_profile">{{ __('voyager::seeders.data_rows.company_profile') }}</label>
                                @php
                                    $company_profile_file = $dataTypeContent->files->where('type','company_profile')->first();
                                @endphp
                                @if($company_profile_file)
                                    @if($company_profile_file->file_type == "application/pdf")
                                        <object style="max-height: 260px;" data="{{Storage::url($company_profile_file->url)}}" type="application/pdf" width="100%" height="500px">
                                            <p>Unable to display PDF file. <a href="{{Storage::url($company_profile_file->url)}}">Download</a> instead.</p>
                                        </object>
                                    @else
                                        <img src="{{ filter_var($company_profile_file->url, FILTER_VALIDATE_URL) ? $company_profile_file->url : Voyager::image( $company_profile_file->url ) }}" style="width:200px; height:auto; clear:both; display:block; padding:2px; border:1px solid #ddd; margin-bottom:10px;" />
                                    @endif
                                @endif

                                <input type="file" id="company_profile" class="form-control-file @error('files') is-invalid @enderror" name="files[company_profile]" >

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

                    <div class="panel panel-bordered" >
                        <div class="panel-heading">
                            <h3 class="panel-title">{!! __('voyager::generic.certificates') !!}</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>
                                <div class="form-group col-md-12">
                                    <label for="url_video">{{ __('voyager::generic.certificates') }}</label>
                                    <div class="img-wrap row">
                                        @php
                                            $certificates = $dataTypeContent->certificates()->get();
                                        @endphp

                                        @if($certificates)
                                            @foreach($certificates as $key => $certificate)
                                                <div class="col-md-3 image-div">
                                                    @if($certificate->type == "application/pdf")
                                                        <object style="max-height: 260px;" data="{{Storage::url($certificate->url)}}" type="application/pdf" width="100%" height="500px">
                                                            <p>Unable to display PDF file. <a href="{{Storage::url($certificate->url)}}">Download</a> instead.</p>
                                                        </object>
                                                    @else
                                                        <img src="{{ filter_var($certificate->url, FILTER_VALIDATE_URL) ? $certificate->url : Voyager::image( $certificate->url ) }}" style="width:200px; height:auto; clear:both; display:block; padding:2px; border:1px solid #ddd; margin-bottom:10px;" />
                                                    @endif
                                                        <button type="button" class="btn btn-circle btn-danger remove" data-image="{{ $certificate->id }}">
                                                            <i class="voyager-trash"></i>
                                                        </button>
                                                </div>
                                            @endforeach
                                        @endif

                                    </div>

                                    <div class="form-group">
                                        <div id="certifications-wrapper">
                                            <div class="certification-group">
                                                <input type="text" name="certifications[0][title]" class="form-control mb-1" placeholder="Title" >
                                                <input type="text" name="certifications[0][issuer]" class="form-control mb-1" placeholder="Issuer" >
                                                <input type="date" name="certifications[0][date_award]" class="form-control mb-1" >
                                                <input type="file" name="certifications[0][certificate_file]" class="form-control mb-1" >
                                                <button type="button" class="remove-cert btn btn-danger">Remove</button>
                                            </div>
                                        </div>
                                    </div>

                                    <button type="button" id="add-cert" class="btn btn-primary">Add Certification</button>

                                    @error('certificates')
                                    <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </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::profile.avatar') }}
                            </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->user->avatar))
                                    <img src="{{ filter_var($dataTypeContent->user->avatar, FILTER_VALIDATE_URL) ? $dataTypeContent->user->avatar : Voyager::image( $dataTypeContent->user->avatar ) }}" style="width:200px; height:auto; clear:both; display:block; padding:2px; border:1px solid #ddd; margin-bottom:10px;" />
                                @endif
                                <input type="file" data-name="avatar" name="avatar">
                            </div>
                        </div>
                    </div>

                    <div class="panel panel panel-bordered panel-success">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                {{ __('voyager::seeders.data_rows.logo') }}
                            </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->logo))
                                    <img src="{{ filter_var($dataTypeContent->logo, FILTER_VALIDATE_URL) ? $dataTypeContent->logo: Voyager::image( $dataTypeContent->logo ) }}" style="width:200px; height:auto; clear:both; display:block; padding:2px; border:1px solid #ddd; margin-bottom:10px;" />
                                @endif
                                <input type="file" data-name="logo" name="logo">
                            </div>
                        </div>
                    </div>

                    <div class="panel panel panel-bordered panel-primary">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                {{ __('voyager::seeders.data_rows.services') }}
                            </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">
                                <div class="form-group">
                                    <label for="services">{{ __('voyager::seeders.data_rows.services') }}</label>

                                    <select class="form-control select2" name="services[]" multiple required>
                                        @foreach(\App\Models\Service::get() as $service)
                                            <option value="{{ $service->id }}" {{ (old('services') == $service->id || in_array($service->id,$dataTypeContent->services->pluck('id')->toArray() ) ) ? "selected" : "" }}>{{ $service->name }}</option>
                                        @endforeach
                                    </select>

                                    @error('services')
                                    <div class="text-danger error-massage">{{ $message }}</div>
                                    @enderror
                                </div>
                            </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')

    <script>
        let certIndex = 1;

        $('#add-cert').on('click', function () {
            let newCert = `
        <div class="certification-group mb-3">
            <input type="text" name="certifications[${certIndex}][title]" placeholder="Title" class="form-control mb-1" required>
            <input type="text" name="certifications[${certIndex}][issuer]" placeholder="Issuer" class="form-control mb-1" required>
            <input type="date" name="certifications[${certIndex}][date_award]" class="form-control mb-1" required>
            <input type="file" name="certifications[${certIndex}][certificate_file]" class="form-control mb-1" required>
            <button type="button" class="btn btn-danger remove-cert">Remove</button>
        </div>
        `;
            $('#certifications-wrapper').append(newCert);
            certIndex++;
        });

        $(document).on('click', '.remove-cert', function () {
            $(this).closest('.certification-group').remove();
        });
    </script>

    <script>
        $(document).ready(function(){
            $(document).on('click','.remove',function(){

                var image_source = $(this).data('image');

                var var_this = $(this);

                $.ajax({
                    url: "{{ route('voyager.remove_file.ajax') }}",
                    data: {
                        "image_source": image_source,
                    },
                    type: "GET",
                    success: function(response)
                    {
                        toastr.success(response.success+'!');
                        $(var_this).closest('.image-div').remove();
                    },
                    error: function(xhr) {

                    }
                });

            });
        });
    </script>
@stop