@extends('layouts.app_new')
@section('title', 'Groups')
@section('content')
<div class="row flex-fill gutters justify-content-center">
    <div class="col-md-12">
        <div class="card shadow">
            <div class="card-body">
                <h5 class="text-primary card-title">
                    {{ __('New Policy Type') }} <span class="float-end">
                    </span>
                </h5>
                <form action="{{ empty($type) ? route('policytypes.store') : route('policytypes.update', $type->id) }}"
                    method="POST" class="form" enctype="multipart/form-data">
                    @csrf
                    @if (!empty($type))
                    @method('PUT')
                    @endif
                    <div class="row my-2 justify-content-center mb-2 g-2">

                        <label class="card-title form-label col-md-2 text-end">{{ __('ar_title') }} :</label>
                        <div class="col-md-4">
                            <input class="form-control @error('ar_title') is-invalid @enderror" type="text"
                                name="ar_title" value="{{ $type->ar_title ?? old('ar_title') }}" required>
                            @error('ar_title')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <label class="card-title form-label col-md-2 text-end">{{ __('en_title') }} :</label>
                        <div class="col-md-4">
                            <input class="form-control @error('en_title') is-invalid @enderror" type="text"
                                name="en_title" value="{{ $type->en_title ?? old('en_title') }}" required>
                            @error('en_title')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror

                        </div>
                        <label class="card-title form-label col-md-2 text-end">{{ __('policy_header') }} :</label>
                        <div class="col-md-4">
                            <input id="policy_header" type="file" accept="image/*" name="policy_header"
                                class="form-control header-field">
                            @error('policy_header')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-6 text-end">
                            <img class="policy_header" @if(!empty($type)&& $type->policy_header)
                            src="{{asset('storage/policy_headers/'.$type->policy_header)}}"@endif alt="" style="max-width:80% !important">
                        </div>

                        <label class="card-title form-label col-md-2 text-end">{{ __('policy_header2') }} :</label>
                        <div class="col-md-4">
                            <input id="policy_header2" type="file" accept="image/*" name="policy_header2"
                                class="form-control header2-field">
                            @error('policy_header2')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-6 text-end">
                            <img class="policy_header2" @if(!empty($type)&& $type->policy_header2)
                            src="{{asset('storage/policy_headers/'.$type->policy_header2)}}"@endif alt="" style="max-width:80% !important">
                        </div>


                        <label class="card-title form-label col-md-2 text-end">{{ __('policy_footer') }} :</label>
                        <div class="col-md-4">
                            <input id="policy_footer" type="file" accept="image/*" name="policy_footer"
                                class="form-control pfooter-field">
                            @error('policy_footer')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-6 text-end">
                            <img class="policy_footer" @if(!empty($type)&& $type->policy_footer)
                            src="{{asset('storage/policy_headers/'.$type->policy_footer)}}"@endif alt="" style="max-width:80% !important">
                        </div>

                    <label class="card-title form-label col-md-2 text-end">{{ __('Admin') }} :</label>
                    <div class="col-md-4">
                        <select id="admin_id" class="form-select select2 @error('admin_id') is-invalid @enderror" name="admin_id"
                            style="width: 100%">
                            @foreach ($admins as $admin)
                            <option value="{{$admin->id}}" @if(isset($type->
                                admin_id)){{$type->admin_id==$admin->id?'selected':''}}@elseif(old('admin_id')==$admin->id)selected
                                @endif>{{$admin->name}}</option>
                            @endforeach
                        </select>
                        @error('ar_title')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    </div>
                    <hr>
                    <div class="row my-2 my-medias align-items-center">
                        <div class="col-12 text-center">
                            <label for="imgs mb-4">
                                {{ __('More Pages in Policy') }}:</label>
                        </div>
                        @if (!empty($type))
                        @if(is_array(json_decode($type->more_pages)) && count(json_decode($type->more_pages)))
                        @foreach (json_decode($type->more_pages) as $img)
                        <div class="col-md-4 col-sm-6 my-media my-1">
                            <img src="{{asset('storage/policy_types/' . $img)}}" class="img-fluid delete-media"
                                style="">
                            <input type="text" name="oldimgs[]" class="d-none media-field" value="{{$img}}">
                        </div>
                        @endforeach
                        {{-- @else
                        <div class="col-md-4 col-sm-6 my-media my-1">
                            <img src="{{asset('storage/policy_types/' . $type->more_pages)}}"
                                class="img-fluid delete-media" style="">
                            <input type="text" name="oldimgs[]" class="d-none media-field"
                                value="{{$type->more_pages}}">
                        </div>--}}
                        @endif
                        @endif
                        <div class="col-md-4 col-sm-6 my-media my-1">
                            <img src="{{asset('storage/defaults/plus-flat.png')}}" class="add-media"
                                style="width: 25px">
                            <input type="file" name="imgs[]" accept="image/x-png,image/jpg,image/jpeg"
                                class="d-none media-field">
                        </div>
                    </div>
                    <hr>
                    {{-- <div class="row">
                        <div class="col-md-4 col-form-label " style="text-align:start">
                            <label for="img">
                                {{ __('More Pages in Policy') }}:
                        </div>
                        <div class="col-8">
                            <input class="form-control" type="file" name="imgs[]" multiple>
                        </div>
                        <div class="col-12">
                            @if (!empty($type)&& is_array(json_decode($type->more_pages))
                            &&count(json_decode($type->more_pages)))
                            @foreach (json_decode($type->more_pages) as $item)
                            <img src="{{ asset('storage/policy_types/' . $item) }}" width="25%"
                                class="img-fluid img-thumbnail">
                            @endforeach
                            @endif
                        </div>
                    </div> --}}
                    <div class="row">
                        <div class="col-12 table-responsive">
                            <table class="table table-hover table-border table-responsive text-center"
                                style="width: 100%">
                                <thead class="thead-default">
                                    <tr>
                                        <th>{{__("ar_label")}}</th>
                                        <th>{{__("ar_content")}}</th>
                                        <th>{{__("en_label")}}</th>
                                        <th>{{__("en_content")}}</th>
                                        <th>{{__('Control')}}</th>
                                    </tr>
                                </thead>
                                <tbody id="det_table_body">
                                    @if(!empty(old('det')))
                                    @for($key=0 ; $key<count(old('det.ar_label'));$key++) @php $dets=old('det'); @endphp
                                        <tr>
                                        <td>
                                            <input class="form-control" type="text" name="det[ar_label][]"
                                                value="{{$dets['ar_label'][$key]}}">
                                            @error("det.ar_label.".$key."")
                                            <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </td>
                                        <td><input class="form-control" type="text" name="det[ar_content][]"
                                                value="{{$dets['ar_content'][$key]}}">
                                            @error("det.ar_content.".$key."")<span class="text-danger">
                                                {{$message}}</span>@enderror
                                        </td>
                                        <td><input class="form-control" type="text" name="det[en_label][]"
                                                value="{{$dets['en_label'][$key]}}">
                                            @error("det.en_label.".$key."")<span class="text-danger">{{ $message
                                                }}</span>@enderror
                                        </td>
                                        <td><input class="form-control" type="text" name="det[en_content][]"
                                                value="{{$dets['en_content'][$key]}}">
                                            @error("det.en_content.".$key."")<span class="text-danger">{{ $message
                                                }}</span>@enderror
                                        </td>
                                        <td>
                                            <button class="btn rounded-circle btn-outline-danger mx-1  px-3 btn-delete">
                                                <i class="zmdi zmdi-delete"></i>
                                            </button>
                                        </td>
                                        </tr>
                                        @endfor
                                        @elseif(!empty($type))
                                        @foreach ($type->details as $det)
                                        <tr>
                                            <td><input class="form-control" type="text" name="det[ar_label][]"
                                                    value="{{$det->ar_label}}"></td>
                                            <td><input class="form-control" type="text" name="det[ar_content][]"
                                                    value="{{$det->ar_content}}"></td>
                                            <td><input class="form-control" type="text" name="det[en_label][]"
                                                    value="{{$det->en_label}}"></td>
                                            <td><input class="form-control" type="text" name="det[en_content][]"
                                                    value="{{$det->en_content}}"></td>
                                            <td>
                                                <button id="btn-delete"
                                                    class="btn rounded-circle btn-outline-danger mx-1  px-3 btn-delete">
                                                    <i class="zmdi zmdi-delete"></i>
                                                </button>
                                            </td>
                                        </tr>
                                        @endforeach
                                        @endif
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td>
                                            <button id="add_det" type="button" class="btn btn-primary">{{__("New detaile")}}</button>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                    <a class="btn btn-secondary float-end mx-2"
                        href="{{route('policytypes.index')}}">{{__('Cancel')}}</a>
                    <button class="btn btn-primary float-end mx-2" type="submit">
                        {{ __('Submit') }}
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection
@section('script')
<script>
    $('#admin_id').select2({ theme: 'bootstrap-5' });
</script>
{{-- <script src="{{asset('datatable/jquery.js')}}"></script> --}}
{{-- <script src="{{asset('datatable/datatables.min.js')}}"></script> --}}

<script type="text/javascript">
    $(function() {
            $('#add_det').on('click', function() {
                $('#det_table_body').append(`<tr>
                    <td><input class="form-control" type="text" name="det[ar_label][]"></td>
                    <td><input class="form-control" type="text" name="det[ar_content][]"></td>
                    <td><input class="form-control" type="text" name="det[en_label][]"></td>
                    <td><input class="form-control" type="text" name="det[en_content][]"></td>
                    <td>
                        <button type="button" class="btn rounded-circle btn-outline-danger btn-delete" onclick="deleteRow(this)">
                            <i class="zmdi zmdi-delete"></i>
                        </button>
                    </td>
                </tr>`
                );
            });

        });

    function deleteRow(del_btn){
        del_btn.closest('tr').remove();
    }

    function readURL(input, temp) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                temp.fadeOut(1, function(){
                $(this).attr('src', e.target.result);
                $(this).fadeIn(500);
                });
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $(function(){


        $(document).on('change', ".header-field", function(){
                var temp = $('.policy_header');
                readURL(this, temp);
                temp.addClass('img-fluid');
                temp.attr('style','');
        });
        $(document).on('change', ".header2-field", function(){
                var temp = $('.policy_header2');
                readURL(this, temp);
                temp.addClass('img-fluid');
                temp.attr('style','');
        });

        $(document).on('change', ".pfooter-field", function(){
                var temp = $('.policy_footer');
                readURL(this, temp);
                temp.addClass('img-fluid');
                temp.attr('style','');
        });

        // Media
        $(document).on('click', ".add-media", function(){
         $(this).siblings('.media-field').click();
        });

        $(document).on('change', ".media-field", function(){
        var temp = $('.add-media');
        readURL(this, temp);
        temp.addClass('img-fluid');
        temp.attr('style','');
        temp.toggleClass('delete-media');
        temp.toggleClass('add-media');
        $('.my-medias').append(`<div class="col-md-4 col-sm-6 text-center my-media my-1">
            <img class="add-media" style="width: 25px" src="{{asset('storage/defaults/plus-flat.png')}}">
            <input type="file" name="imgs[]" class="d-none media-field">
        </div>`);
        });

        $(document).on('click', ".delete-media", function () {
        $(this).closest('.my-media').fadeOut(300, function(){
        $(this).closest('.media-field').remove();
        $(this).closest('.my-media').remove();
        });
        });

    });
</script>
@endsection