@extends('layouts.admin')

@section('content')

<!-- [ breadcrumb ] start -->
<div class="page-header">
    <div class="page-block">
        <div class="row align-items-center">
            <div class="col-md-12">
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">হোম</a></li>
                    <li class="breadcrumb-item"><a href="javascript: void(0)">কন্টেন্ট</a></li>
                    <li class="breadcrumb-item" aria-current="page">নিউজ / সম্পাদনা</li>
                </ul>
            </div>
            <div class="col-md-12">
                <div class="page-header-title">
                    <h2 class="mb-0">নিউজ / সম্পাদনা</h2>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- [ breadcrumb ] end -->

@include('includes.admin.form-both')
<div class="gocover" style="background: url({{asset('assets/images/'.$gs->admin_loader)}}) no-repeat scroll center center rgba(45, 45, 45, 0.5);"></div>
<form id="geniusformdata2" action="{{ route('article.update',$data->id)}}" enctype="multipart/form-data">
    {{csrf_field()}}
    <input type="hidden" name="is_pending" value="{{ $data->is_pending}}">
    <input type="hidden" name="post_type" value="{{ $data->post_type}}">
    <input type="hidden" id="article_post_id" value="{{ $data->id}}">
    <div class="row">
        {{-- ========== LEFT COLUMN — Content ========== --}}
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header"><h5>{{ __('কন্টেন্ট তথ্য') }}</h5></div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">{{ __('Language') }} <span class="text-danger">*</span></label>
                        <select name="language_id" id="article_language_id" class="form-select">
                            @foreach ($languages as $language)
                                <option value="{{$language->id}}" {{ $language->id == $data->language_id ? 'selected' : ''}}>{{$language->language}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">{{ __('Title') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="title" placeholder="{{ __('Title') }}" id="title" autocomplete="off" value="{{ $data->title }}">
                        <small class="text-muted">{{ __('(In Any Language)') }}</small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">{{ __('Slug') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="slug" name="slug" placeholder="{{ __('Slug') }}" value="{{ $data->slug }}">
                        <p id="slugCheck"></p>
                        <small class="text-muted">{{ __('In English') }}</small>
                    </div>

                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label">{{ __('Division') }} <span class="text-danger">*</span></label>
                            <select name="division_id" id="division_id" class="form-select">
                                <option value="">{{ __('Select Division') }}</option>
                                @foreach ($divisions as $division)
                                    <option value="{{ $division->id }}" {{ $division->id == $data->division_id ? 'selected' : '' }}>{{ $division->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">{{ __('District') }} <span class="text-danger">*</span></label>
                            <select name="district_id" id="district_id" class="form-select">
                                <option value="">{{ __('Select District') }}</option>
                                @foreach ($districts as $district)
                                    <option value="{{ $district->id }}" {{ $district->id == $data->district_id ? 'selected' : '' }}>{{ $district->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">{{ __('Upazila') }} <span class="text-danger">*</span></label>
                            <select name="upazila_id" id="upazila_id" class="form-select">
                                <option value="">{{ __('Select Upazila') }}</option>
                                @foreach ($upazilas as $upazila)
                                    <option value="{{ $upazila->id }}" {{ $upazila->id == $data->upazila_id ? 'selected' : '' }}>{{ $upazila->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">{{ __('Meta Keyword') }} <span class="text-danger">*</span></label>
                        <textarea class="form-control" name="meta_tag" rows="2" placeholder="{{__('Keyword meta tag')}}">{{ $data->meta_tag }}</textarea>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">{{ __('Images Caption') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="images_caption" placeholder="{{ __('Images Caption') }}" id="images_caption" autocomplete="off" value="{{ $data->images_caption }}">
                        <small class="text-muted">{{ __('(In Any Language)') }}</small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">{{ __('Short Description') }} <span class="text-danger">*</span></label>
                        <textarea class="form-control" name="short_description" rows="3" placeholder="{{__('Short Details')}}">{{ $data->short_description }}</textarea>
                    </div>

                    <div class="mb-3 description">
                        <label class="form-label">{{ __('Description') }} <span class="text-danger">*</span></label>
                        <textarea class="nic-edit" name="description" placeholder="{{__('Description')}}" id="description">{{ $data->description}}</textarea>
                    </div>
                </div>
            </div>
        </div>

        {{-- ========== RIGHT COLUMN — Sidebar ========== --}}
        <div class="col-lg-4">
            {{-- Featured Image --}}
            <div class="card">
                <div class="card-header"><h5>{{ __('ফিচার্ড ইমেজ') }}</h5></div>
                <div class="card-body">
                    <div class="img-upload custom-image-upload">
                        <div id="image-preview" class="img-preview" style="background: url({{ $data->image_big ? asset('assets/images/post/'.$data->image_big) : asset('assets/admin/images/upload.png') }});">
                            <label for="image-upload" class="img-label" id="image-label"><i class="icofont-upload-alt"></i>Upload</label>
                            <input type="file" name="image_big" class="img-upload" id="image-upload">
                        </div>
                        <p class="text-muted small mt-1">{{__('Prefered Size: (600x600) or Square Sized Image')}}</p>
                    </div>
                </div>
            </div>

            {{-- Category — AJAX loaded --}}
            <div class="card categoryDiv">
                <div class="card-header"><h5>{{ __('ক্যাটাগরি') }}</h5></div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">{{ __('Category') }} <span class="text-danger">*</span></label>
                        <select name="category_id" id="article_parent_id" class="form-select"></select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('Sub Category') }}</label>
                        <select name="subcategories_id" id="subcategory_id" class="form-select">
                            <option value="">{{__('Please a Sub Category(if any)')}}</option>
                        </select>
                    </div>
                </div>
            </div>

            {{-- Options --}}
            <div class="card">
                <div class="card-header"><h5>{{ __('পোস্ট অপশন') }}</h5></div>
                <div class="card-body">
                    @php
                        $radioOptions = [
                            ['name' => 'is_feature', 'label' => __('Add to Feature'), 'id' => 'is_feature', 'val' => $data->is_feature],
                            ['name' => 'is_slider', 'label' => __('Add to Slider'), 'id' => 'is_slider', 'val' => $data->is_slider],
                            ['name' => 'slider_right', 'label' => __('Slider Right Post'), 'id' => 'slider_right', 'val' => $data->slider_right],
                            ['name' => 'is_trending', 'label' => __('Add to Trending News'), 'id' => 'is_trending', 'val' => $data->is_trending],
                        ];
                    @endphp
                    @foreach($radioOptions as $opt)
                    <div class="mb-3">
                        <label class="form-label">{{ $opt['label'] }}</label>
                        <div>
                            <div class="form-check form-check-inline">
                                <input type="radio" class="form-check-input" name="{{ $opt['name'] }}" value="1" id="{{ $opt['id'] }}1" {{ $opt['val'] == 1 ? 'checked' : '' }}>
                                <label class="form-check-label" for="{{ $opt['id'] }}1">{{__('Yes')}}</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input type="radio" class="form-check-input" name="{{ $opt['name'] }}" value="0" id="{{ $opt['id'] }}2" {{ $opt['val'] == 0 ? 'checked' : '' }}>
                                <label class="form-check-label" for="{{ $opt['id'] }}2">{{__('No')}}</label>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- Schedule & Submit --}}
            <div class="card">
                <div class="card-header"><h5>{{ __('প্রকাশ') }}</h5></div>
                <div class="card-body">
                    <div class="mb-3" @if($data->schedule_post == 0) style="display:none;" @endif>
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input schedule" name="schedule_post" value="{{ $data->schedule_post}}" {{$data->schedule_post == 1 ? 'checked':''}} disabled id="schedule_post">
                            <label class="form-check-label" for="schedule_post">{{ __('Schedule Post') }}</label>
                        </div>
                    </div>
                    <div class="mb-3 datepick" style="display:none;">
                        <label class="form-label">{{ __('Start Date') }}</label>
                        <input id="from" class="form-control" type="text" name="schedule_post_date" autocomplete="off" placeholder="{{__('Start Date')}}" required="" value="{{ $data->schedule_post_date}}">
                    </div>
                    <div class="d-grid gap-2">
                        <input type="submit" data-draft="0" class="btn btn-primary submit-btn1" value="Update Post">
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

{{-- Gallery Modal --}}
<div class="modal fade" id="setgallery" tabindex="-1" role="dialog" aria-labelledby="setgallery" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">{{ __("Image Gallery") }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="top-area">
                    <div class="row">
                        <div class="col-sm-6 text-right">
                            <div class="upload-img-btn">
                                <form method="POST" enctype="multipart/form-data" id="form-gallery">
                                    {{ csrf_field() }}
                                    <input type="hidden" id="post_id" name="post_id" value="{{ $data->id }}">
                                    <input type="file" name="gallery[]" class="hidden" id="article_upload_gallery_edit" accept="image/*" multiple>
                                    <label id="article_gallery_edit"><i class="icofont-upload-alt"></i>{{ __("Upload File") }}</label>
                                </form>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <a href="javascript:;" class="upload-done" data-bs-dismiss="modal"><i class="fas fa-check"></i> {{ __("Done") }}</a>
                        </div>
                        <div class="col-sm-12 text-center">( <small>{{ __("You can upload multiple Images.") }}</small> )</div>
                    </div>
                </div>
                <div class="gallery-images">
                    <div class="selected-image">
                        <div class="row"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Post Approve Modal --}}
<div class="modal fade" id="post-approve" tabindex="-1" role="dialog" aria-labelledby="modal1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header d-block text-center">
                <h4 class="modal-title d-inline-block">{{ __('Post Approve') }}</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="text-center">{{ __('You are about to approve this Post') }}.</p>
                <p class="text-center">{{ __('Do you want to proceed?') }}</p>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-default" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                <a class="btn btn-danger btn-ok">{{ __('Approve') }}</a>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script src="{{asset('assets/admin/js/page.js')}}"></script>
<script src="{{asset('assets/admin/js/articleEdit.js')}}"></script>
<script src="{{asset('assets/admin/js/image_gallary.js')}}"></script>
<script src="{{asset('assets/admin/js/tagify.js')}}"></script>
<script>
    $('.tags').tagify();
</script>
<script>
$(document).ready(function() {
    let post_id = $('#article_post_id').val();
    let lang_id = $('#article_language_id').val();
    let division_id = '{{ $data->division_id ?? 0 }}';
    let district_id = '{{ $data->district_id ?? 0 }}';
    let upazila_id = '{{ $data->upazila_id ?? 0 }}';

    loadDivisions(lang_id, division_id);

    $('#article_language_id').on('change', function() {
        let newLang = $(this).val();
        $('#division_id').html('<option>Loading...</option>');
        $('#district_id').html('<option value="">Select District</option>');
        $('#upazila_id').html('<option value="">Select Upazila</option>');
        loadDivisions(newLang, null);
    });

    $('#division_id').on('change', function() {
        let id = $(this).val();
        $('#district_id').html('<option>Loading...</option>');
        $.get('/admin/get-districts/' + id, function(data) {
            $('#district_id').html(data);
        });
    });

    $('#district_id').on('change', function() {
        let id = $(this).val();
        $('#upazila_id').html('<option>Loading...</option>');
        $.get('/admin/get-upazilas/' + id, function(data) {
            $('#upazila_id').html(data);
        });
    });

    function loadDivisions(language_id, selected_division_id = null) {
        if (language_id) {
            $.get('/admin/get-divisions/' + language_id, function(data) {
                $('#division_id').html(data);
                if (selected_division_id) {
                    $('#division_id').val(selected_division_id);
                    loadDistricts(selected_division_id);
                }
            });
        }
    }

    function loadDistricts(division_id) {
        $.get('/admin/get-districts/' + division_id, function(data) {
            $('#district_id').html(data);
            $('#district_id').val(district_id);
            if (district_id) {
                $.get('/admin/get-upazilas/' + district_id, function(data) {
                    $('#upazila_id').html(data);
                    $('#upazila_id').val(upazila_id);
                });
            }
        });
    }
});
</script>
@endsection
