@extends("layouts.admin.app")

@section("page-title")
{{__("Dashboard")}}
@endSection

@section("page-nav-title")
<div class="app-title">
    <div>
        <h1><i class="fa fa-dashboard"></i>{{__("documents")}}</h1>
        <p>{{__("all-documents")}}</p>
    </div>
    <ul class="app-breadcrumb breadcrumb">
        <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
        <li class="breadcrumb-item"><a href="#">{{__("Dashboard")}}</a></li>
        <li class="breadcrumb-item"><a href="{{route("admin.documents.index")}}">{{__("documents")}}</a></li>
        <li class="breadcrumb-item"><a href="#">{{__("edit")}}</a></li>
    </ul>
</div>
@endsection

@section("content")
<div class="row">
    <div class="col-lg-10 m-auto">
        <div class="tile">
            <h3 class="tile-title">{{__("edit-documents")}}</h3>
            <div class="tile-body">
                <form method="post" action="{{route("admin.documents.update", $document->id)}}" enctype="multipart/form-data">
                    @csrf
                    @method("put")
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="control-label">{{__("issuing-date")}}</label>
                                <input class="form-control @if($errors->has('date')) is-invalid @endif" type="date" name="date" id="date" placeholder="{{__("enter-date")}}" value="{{$document->date}}">
                            </div>
                            @error("date")
                            <div class="input-error">{{$message}}</div>
                            @enderror
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="control-label">{{__("type")}}</label>
                                <select class="form-control @if($errors->has('type_id')) is-invalid @endif" id="type" name="type_id">
                                    <option></option>
                                    @foreach($documentTypes as $documentType)
                                    <option value="{{$documentType->id}}" @if( old("type")===$documentType->id) @elseif($document->type_id === $documentType->id) selected @endif >{{$documentType->en_type}}</option>
                                    @endforeach
                                </select>
                            </div>
                            @error("type_id")
                            <div class="input-error">{{$message}}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="control-label">{{__("expiry-date")}}</label>
                                <input class="form-control @if($errors->has('expiry_date')) is-invalid @endif" type="date" name="expiry_date" id="expiry_date" value="{{$document->expiry_date}}">
                            </div>
                            @error("expiry_date")
                            <div class="input-error">{{$message}}</div>
                            @enderror
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label class="control-label">{{__("description")}}</label>
                                <textarea class="form-control @if($errors->has('description')) is-invalid @endif" type="text" name="description" placeholder="{{__("enter-description")}}">{{$document->description}}</textarea>
                            </div>
                            @error("description")
                            <div class="input-error">{{$message}}</div>
                            @enderror
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label class="control-label" style="font-weight: bold">{{__("attachment-files")}}</label>
                                @foreach($document->files as $file)
                                <div class="modal-body">
                                    <div class="row">
                                        <div id="docs" class="col-lg-4">
                                            <a target="_blank" href="{{ asset($file->path.'/'.$file->file_name)}}"><span class="field-view">{{$file->file_name}}</span></a>
                                        </div>
                                        <a onclick="deleteDoc({{$file->id}})" id="deleteBtn{{$file->id}}" href="#" class="control-link remove" data-form-id="#delete{{$file->id}}"><i class="far fa-trash-alt"></i></a>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div>
                        <button class="btn btn-primary form-control button-upload-file" style="width: 18%; margin-right: 30px; margin-bottom: 15px">
                            <input onchange="checkUpload()" class="input-file" type="file" name="document[]" id="file" multiple>
                            <span class="upload-file-content">
                                <i class="fas fa-upload fa-lg upload-file-content-icon left"></i>
                                <span class="upload-file-content-text">{{__("upload-documents")}}</span>
                            </span>
                        </button>
                        <div id="icon" style="display:none;">
                            <span id="text" style="margin-right: 10px"></span>
                            <i class="fa fa-check-circle fa-2x" style="color: limegreen;margin: auto;"></i>
                        </div>
                    </div>
                    @error("documents")
                    <div class="input-error">{{$message}}</div>
                    @enderror
                    <div class="tile-footer">
                        <button class="btn btn-primary" type="submit"><i class="fa fa-fw fa-lg fa-check-circle"></i> {{__("save")}}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<form class="deleteForm" method="post" style="display: none" data-swal-title="{{__("delete-documents")}}" data-swal-text="{{__("are-you-sure-to-delete-this-documents?")}}" data-yes="{{__("yes")}}" data-no="{{__("no")}}" data-success-msg="{{__("the-documents-deleted-successfully")}}">
    @csrf
    @method("delete")
</form>
@endsection

@section("scripts")
<script src="{{asset('assets/js/utils/week_days.js')}}"></script>
<script src="{{asset('assets/js/pages/create_sub_category.js')}}"></script>
<script type="text/javascript">
    $("#type").select2({
        placeholder: "{{__('select-type')}}",
        width: "100%",
    });

    function deleteDoc(id) {
        var fileInput = document.getElementById('file');
        var files = fileInput.files;
        if ($("#docs a").length > 1) {
            var element = document.getElementById("deleteBtn" + id);
            element.classList.add("form-confirm");
            const form = document.querySelector('.deleteForm');
            var url = "{{route("admin.documents.destroy-documents" , ["id"=>':id'])}}";
            url = url.replace(':id', id);
            form.setAttribute("action", url);
            form.setAttribute("id", "delete" + id);
        } else {
            swal({
                icon: 'error',
                title: "{{__('not - allowed ')}}",
                text: "{{__('delete - documents - error ')}}"
            })
        }
    }

    function checkUpload() {
        var fileInput = document.getElementById('file');
        var files = fileInput.files;
        if (files.length == 0) {
            $('#icon').css('display', 'none');
        } else {
            if (files.length == 1)
                $("#text").html("1 file uploaded successfully")
            else
                $("#text").html(files.length + " files uploaded successfully")
            $('#icon').css('display', 'inline');
        }

    }

    $("#date").on("change", function() {
        if ($("#type").val() !== "") {
            var baseUrl = window.location.origin;
            $.ajax({
                type: "get",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: baseUrl + "/en/ajax/documents/get-document-types-details/" + $("#type").val(),
                success: function(response) {
                    if (response["status"]) {
                        if (response["data"]["expiry_type"] === "Y") {
                            const date = new Date($("#date").val());
                            let expiryDate = date.setFullYear(date.getFullYear() + response["data"]["expiry_period"]);
                            expiryDate = new Date(expiryDate);
                            let day = ("0" + expiryDate.getDate()).slice(-2);
                            let month = expiryDate.getMonth();
                            month = parseInt(month) + 1;
                            month = ("0" + month).slice(-2);
                            let year = expiryDate.getFullYear();
                            $("#expiry_date").val(year + "-" + month + "-" + day);
                        } else if (response["data"]["expiry_type"] === "M") {
                            function addMonths(numOfMonths, date = new Date()) {
                                date.setMonth(date.getMonth() + numOfMonths);
                                return date;
                            }

                            const date = new Date($("#date").val());
                            let expiryDate = new Date(addMonths(response["data"]["expiry_period"], date));
                            let day = ("0" + expiryDate.getDate()).slice(-2);
                            let month = expiryDate.getMonth();
                            month = parseInt(month) + 1;
                            month = ("0" + month).slice(-2);
                            let year = expiryDate.getFullYear();
                            $("#expiry_date").val(year + "-" + month + "-" + day);
                        }
                    } else {

                    }
                },
            });
        }
    })

    $("#type").on("change", function() {
        if ($("#date").val() !== "") {
            var baseUrl = window.location.origin;
            $.ajax({
                type: "get",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: baseUrl + "/en/ajax/documents/get-document-types-details/" + $("#type").val(),
                success: function(response) {
                    if (response["status"]) {
                        if (response["data"]["expiry_type"] === "Y") {
                            const date = new Date($("#date").val());
                            let expiryDate = date.setFullYear(date.getFullYear() + response["data"]["expiry_period"]);
                            expiryDate = new Date(expiryDate);
                            let day = ("0" + expiryDate.getDate()).slice(-2);
                            let month = expiryDate.getMonth();
                            month = parseInt(month) + 1;
                            month = ("0" + month).slice(-2);
                            let year = expiryDate.getFullYear();
                            $("#expiry_date").val(year + "-" + month + "-" + day);
                        } else if (response["data"]["expiry_type"] === "M") {
                            function addMonths(numOfMonths, date = new Date()) {
                                date.setMonth(date.getMonth() + numOfMonths);
                                return date;
                            }

                            const date = new Date($("#date").val());
                            let expiryDate = new Date(addMonths(response["data"]["expiry_period"], date));
                            let day = ("0" + expiryDate.getDate()).slice(-2);
                            let month = expiryDate.getMonth();
                            month = parseInt(month) + 1;
                            month = ("0" + month).slice(-2);
                            let year = expiryDate.getFullYear();
                            $("#expiry_date").val(year + "-" + month + "-" + day);
                        }
                    } else {

                    }
                },
            });
        }
    })
</script>

@endsection