@extends('admin.layouts.app')
@section('title','Edit Department')
@section('content')
    <div class="container-fluid">
        <div class="d-flex justify-content-between py-4">
            <p class="page-title">Edit</p>
            <a class="btn btn-sm btn-warning" href="{{route('department.index')}}">View All</a>
        </div>
        <div class="card rounded-0">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
                        <form action="{{route('department.update', $department->id)}}" method="post"
                              enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            <div class="row">
                                <div class="col-md-3 col-sm-12 mb-3">
                                    <label class="form-label">Type *</label>
                                    <select name="type" id="type"
                                            class="form-control form-select @error('type') is-invalid @enderror">
                                        <option value="">Choose</option>
                                        <option value="academic" @if($department->type == 'academic') selected @endif>Academic</option>
                                        <option value="administrator" @if($department->type == 'administrator') selected @endif>Administrator</option>
                                    </select>
                                    @error('type')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                                <div class="col-md-3 col-sm-12 mb-3">
                                    <label class="form-label">Faculty *</label>
                                    <select name="faculty_id" id="" class="form-control @error('faculty_id') is-invalid @enderror">
                                        <option value="">Choose</option>
                                        @foreach ($facility as $facilities)
                                            <option
                                                value="{{$facilities->id}}" {{ $facilities->id == $department->faculty_id ? 'selected' : '' }}>{{$facilities->name}}</option>
                                        @endforeach
                                    </select>
                                    @error('faculty_id')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>

                                <div class="col-md-6 col-sm-12 mb-3">
                                    <label class="form-label">Name *</label>
                                    <input type="text" class="form-control rounded-0 @error('name') is-invalid @enderror" name="name"
                                           value="{{$department->name}}">
                                    @error('name')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>

                                <div class="col-md-6 col-sm-12 mb-3" id="thumbnail_input">
                                    <label class="form-label">Thumbnail *</label>
                                    <input type="file" class="form-control rounded-0 image-cropper-img @error('img') is-invalid @enderror" name="img"
                                           accept=".png, .jpg, .jpeg">
                                    @error('img')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                                <div class="col-md-6 col-sm-12 mb-3" id="banner_input">
                                    <label class="form-label">Banner *</label>
                                    <input type="file" class="form-control rounded-0 image-cropper-banner @error('banner') is-invalid @enderror"
                                           name="banner">
                                    @error('banner')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>

                                <div class="col-md-6 col-sm-12 mb-3">
                                    <label class="form-label">Mission *</label>
                                    <textarea name="mission" id="" cols="30" rows="3"
                                              class="form-control rounded-0 @error('mission') is-invalid @enderror">{{$department->mission}}</textarea>
                                    @error('mission')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                                <div class="col-md-6 col-sm-12 mb-3">
                                    <label class="form-label">Vision *</label>
                                    <textarea name="vision" id="" cols="30" rows="3"
                                              class="form-control rounded-0 @error('vision') is-invalid @enderror">{{$department->vision}}</textarea>
                                    @error('vision')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>

                                <div class="col-md-6 col-sm-12 mb-3">
                                    <label class="form-label">HOD Name</label>
                                    <input type="text" class="form-control rounded-0 @error('hod_name') is-invalid @enderror" name="hod_name"
                                           value="{{$department->hod_name}}">
                                    @error('hod_name')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                                <div class="col-md-6 col-sm-12 mb-3">
                                    <label class="form-label">HOD Designation</label>
                                    <input type="text" class="form-control rounded-0 @error('hod_designation') is-invalid @enderror" name="hod_designation"
                                           value="{{$department->hod_designation}}">
                                    @error('hod_designation')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>

                                <div class="col-md-12 col-sm-12 mb-3" id="hod_input">
                                    <label class="form-label">HOD Image</label>
                                    <input type="file" class="form-control rounded-0 image-cropper @error('hod_image') is-invalid @enderror" name="hod_image"
                                           id="image-cropper" accept=".png, .jpg, .jpeg">
                                    @error('hod_image')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                                <div class="col-md-6 col-sm-12 mb-3">
                                    <label class="form-label">HOD Message</label>
                                    <textarea name="hod_message" id="ckEditorHOD" cols="30" rows="3"
                                              class="form-control rounded-0 @error('hod_message') is-invalid @enderror">{{$department->hod_message}}</textarea>
                                    @error('hod_message')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>


                                <div class="col-md-6 col-sm-12 mb-3">
                                    <label class="form-label">Objective *</label>
                                    <textarea name="objective" id="ckEditorObjective" cols="30" rows="3"
                                              class="form-control rounded-0 @error('objective') is-invalid @enderror">{{$department->objective}}</textarea>
                                    @error('objective')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                                <div class="col-md-6 col-sm-12 mb-3">
                                    <label class="form-label">Scope *</label>
                                    <textarea name="scope" id="ckEditorScope" cols="30" rows="3"
                                              class="form-control rounded-0 @error('scope') is-invalid @enderror">{{$department->scope}}</textarea>
                                    @error('scope')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                                <div class="col-md-6 col-sm-12 mb-3">
                                    <label class="form-label">Career Opportunities</label>
                                    <textarea name="career_opportunities" id="ckEditorCareer" cols="30" rows="3"
                                              class="form-control rounded-0 @error('career_opportunities') is-invalid @enderror">{{$department->career_opportunities}}</textarea>
                                    @error('career_opportunities')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>


                                <hr>
                                {{--Seo Tags--}}
                                <div class="row mt-4">
                                    <h3 class="mb-3">Seo Meta Data</h3>
                                    <div class="col-md-6 col-sm-12 mb-3">
                                        <label class="form-label">Meta Title</label>
                                        <input type="text" class="form-control rounded-0" name="meta_title"
                                               value="{{$department->meta_title}}">
                                    </div>
                                    <div class="col-md-6 col-sm-12 mb-3">
                                        <label class="form-label">Meta Keyword</label>
                                        <input type="text" class="form-control rounded-0" name="meta_keyword"
                                               value="{{$department->meta_keyword}}">
                                    </div>
                                    <div class="col-md-12 col-sm-12 mb-3">
                                        <label class="form-label">Meta Description</label>
                                        <textarea name="meta_description" id="" cols="30" rows="3"
                                                  class="form-control rounded-0">{{$department->meta_description}}</textarea>
                                    </div>
                                    <div class="col-md-12 mb-3 text-right">
                                        <input type="submit" class="btn btn-sm btn-success" value="Update">
                                    </div>
                                </div>

                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal --}}
    <div class="modal fade bd-example-modal-lg imageCropImg" id="model" tabindex="-1" role="dialog"
         aria-labelledby="cropperModalLabel " aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header py-1 m-0 px-3 bg-dark-green">
                    <h5 class="modal-title text-white fw-bold " id="cropperModal">Thumbnail</h5>
                    <button type="button" class="close btn-close" id="reset-image-img" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body p-0 m-0">
                    <div class="img-container">
                        <div class="row pe-4">
                            <div class="col-md-12">
                                <img class="cropper-image" id="previewImageImg" src="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer p-2 m-0">
                    <button type="button" class="btn  btn-sm bg-dark-green text-white crop" id="cropImageImg">Crop
                    </button>
                </div>
            </div>
        </div>
    </div>
    {{-- End: Modal --}}
    {{-- Modal --}}
    <div class="modal fade bd-example-modal-lg imageCropBanner" id="model" tabindex="-1" role="dialog"
         aria-labelledby="cropperModalLabel" aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header py-1 m-0 px-3 bg-dark-green">
                    <h5 class="modal-title text-white fw-bold " id="cropperModal">Banner</h5>
                    <button type="button" class="close btn-close" id="reset-image-banner" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body p-0 m-0">
                    <div class="img-container">
                        <div class="row pe-4">
                            <div class="col-md-12">
                                <img class="cropper-image" id="previewImageBanner" src="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn  btn-sm bg-dark-green text-white crop" id="cropImageBanner">Crop
                    </button>
                </div>
            </div>
        </div>
    </div>
    {{-- End: Modal --}}
    {{-- Modal --}}
    <div class="modal fade bd-example-modal-lg imageCrop" id="model" tabindex="-1" role="dialog"
         aria-labelledby="cropperModalLabel" aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header py-1 m-0 px-3 bg-dark-green">
                    <h5 class="modal-title text-white fw-bold " id="cropperModal">HOD Image</h5>
                    <button type="button" class="close btn-close" id="reset-image-hod" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body p-0 m-0">
                    <div class="img-container">
                        <div class="row pe-4">
                            <div class="col-md-12">
                                <img class="cropper-image" id="previewImage" src="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn  btn-sm bg-dark-green text-white crop" id="cropImage">Crop</button>
                </div>
            </div>
        </div>
    </div>
    {{-- End: Modal --}}

@endsection
@push('js')
    <script src="{{asset('admin/ckeditor')}}/ckeditor.js"></script>
    <script src="{{asset('admin/ckeditor')}}/ckfinder/ckfinder.js"></script>
    <script src="{{asset('admin/js')}}/canvas-to-blob.min.js"></script>
    <script>
        $(document).ready(function () {
            CKEDITOR.replace('ckEditorHOD');
            CKEDITOR.replace('ckEditorObjective');
            CKEDITOR.replace('ckEditorScope');

            CKEDITOR.replace('ckEditorCareer', {
                filebrowserUploadUrl: "{{route('department-upload-ckeditor', ['_token' => csrf_token() ])}}",
                filebrowserUploadMethod: 'form'
            });

            // Thumbnail Croper
            $('#reset-image-img').on('click', function() {
                $('.image-cropper-img').val('');
            });
            var $modal = $('.imageCropImg');
            var image = document.getElementById('previewImageImg');
            var cropper;
            $("body").on("change", ".image-cropper-img", function (e) {
                e.preventDefault();
                var files = e.target.files;
                var done = function (url) {
                    image.src = url;
                    $modal.modal('show');
                };
                var reader;
                var file;
                var URL;
                if (files && files.length > 0) {
                    file = files[0];
                    if (URL) {
                        done(URL.createObjectURL(file));
                    } else if (FileReader) {
                        reader = new FileReader();
                        reader.onload = function (e) {
                            done(reader.result);
                        };
                        reader.readAsDataURL(file);
                    }
                }
            });
            $modal.on('shown.bs.modal', function () {
                cropper = new Cropper(image, {
                    dragMode: 'move',
                    aspectRatio: 16 / 10,
                    viewMode: 1,
                    autoCropArea: 0.75,
                    restore: false,
                    guides: false,
                    center: false,
                    highlight: false,
                    cropBoxMovable: false,
                    cropBoxResizable: false,
                    toggleDragModeOnDblclick: false,
                });
            }).on('hidden.bs.modal', function () {
                cropper.destroy();
                cropper = null;
            });
            $("body").on("click", "#cropImageImg", function () {
                canvas = cropper.getCroppedCanvas({
                    width: 800,
                    height: 500,
                });
                canvas.toBlob(function (blob) {
                    // Crop & Convert it to image
                    const thumbnailInput = document.getElementById("thumbnail_input")
                    var x = document.createElement("INPUT");
                    x.setAttribute("type", "file");
                    x.setAttribute("name", "cropper_thumbnail");
                    x.classList.add("d-none");
                    thumbnailInput.appendChild(x);
                    const file = new File([blob], 'thumbnail.jpg', {type: 'image/jpeg'})
                    const dataTransfer = new DataTransfer()
                    dataTransfer.items.add(file)
                    x.files = dataTransfer.files
                    $modal.modal('hide');
                });
            });


            //Banner Cropper
            $(document).ready(function () {
                $('#reset-image-banner').on('click', function() {
                    $('.image-cropper-banner').val('');
                });
                var $modal = $('.imageCropBanner');
                var image = document.getElementById('previewImageBanner');
                var cropper;
                $("body").on("change", ".image-cropper-banner", function (e) {
                    e.preventDefault();
                    var files = e.target.files;
                    var done = function (url) {
                        image.src = url;
                        $modal.modal('show');
                    };
                    var reader;
                    var file;
                    var URL;
                    if (files && files.length > 0) {
                        file = files[0];
                        if (URL) {
                            done(URL.createObjectURL(file));
                        } else if (FileReader) {
                            reader = new FileReader();
                            reader.onload = function (e) {
                                done(reader.result);
                            };
                            reader.readAsDataURL(file);
                        }
                    }
                });
                $modal.on('shown.bs.modal', function () {
                    cropper = new Cropper(image, {
                        dragMode: 'move',
                        aspectRatio: 64 / 15,
                        viewMode: 1,
                        autoCropArea: 1.04,
                        restore: false,
                        guides: false,
                        center: false,
                        highlight: false,
                        cropBoxMovable: false,
                        cropBoxResizable: false,
                        toggleDragModeOnDblclick: false,
                    });
                }).on('hidden.bs.modal', function () {
                    cropper.destroy();
                    cropper = null;
                });
                $("body").on("click", "#cropImageBanner", function () {
                    canvas = cropper.getCroppedCanvas({
                        width: 1920,
                        height: 450,
                    });
                    canvas.toBlob(function (blob) {
                        // Crop & Convert it to image
                        const bannerInput = document.getElementById("banner_input")
                        var ban = document.createElement("INPUT");
                        ban.setAttribute("type", "file");
                        ban.setAttribute("name", "cropper_banner");
                        ban.classList.add("d-none");
                        bannerInput.appendChild(ban);
                        const file = new File([blob], 'banner.jpg', {type: 'image/jpeg'})
                        const dataTransfer = new DataTransfer()
                        dataTransfer.items.add(file)
                        ban.files = dataTransfer.files
                        $modal.modal('hide');
                    });
                });
            });

            //HOD Image Cropper
            $(document).ready(function () {
                $('#reset-image-hod').on('click', function() {
                    $('.image-cropper').val('');
                });
                var $modal = $('.imageCrop');
                var image = document.getElementById('previewImage');
                var cropper;
                $("body").on("change", ".image-cropper", function (e) {
                    e.preventDefault();
                    var files = e.target.files;
                    var done = function (url) {
                        image.src = url;
                        $modal.modal('show');
                    };
                    var reader;
                    var file;
                    var URL;
                    if (files && files.length > 0) {
                        file = files[0];
                        if (URL) {
                            done(URL.createObjectURL(file));
                        } else if (FileReader) {
                            reader = new FileReader();
                            reader.onload = function (e) {
                                done(reader.result);
                            };
                            reader.readAsDataURL(file);
                        }
                    }
                });
                $modal.on('shown.bs.modal', function () {
                    cropper = new Cropper(image, {
                        dragMode: 'move',
                        aspectRatio: 1 / 1,
                        viewMode: 1,
                        autoCropArea: 0.75,
                        restore: false,
                        guides: false,
                        center: false,
                        highlight: false,
                        cropBoxMovable: false,
                        cropBoxResizable: false,
                        toggleDragModeOnDblclick: false,
                    });
                }).on('hidden.bs.modal', function () {
                    cropper.destroy();
                    cropper = null;
                });
                $("body").on("click", "#cropImage", function () {
                    canvas = cropper.getCroppedCanvas({
                        width: 400,
                        height: 400,
                    });
                    canvas.toBlob(function (blob) {
                        // Crop & Convert it to image
                        const hodInput = document.getElementById("hod_input")
                        var hod = document.createElement("INPUT");
                        hod.setAttribute("type", "file");
                        hod.setAttribute("name", "cropper_hod");
                        hod.classList.add("d-none");
                        hodInput.appendChild(hod);
                        const file = new File([blob], 'hod.jpg', {type: 'image/jpeg'})
                        const dataTransfer = new DataTransfer()
                        dataTransfer.items.add(file)
                        hod.files = dataTransfer.files
                        $modal.modal('hide');


                        url = URL.createObjectURL(blob);
                        var reader = new FileReader();
                        reader.readAsDataURL(blob);
                        reader.onloadend = function () {
                            var base64data = reader.result;
                            $('#base64image').val(base64data);
                            document.getElementById('image-preview-background').style.backgroundImage = "url(" + base64data + ")";
                            $modal.modal('hide');
                        }
                    });
                });
            });
        });
    </script>
@endpush