@extends('layouts.app')
@section('styles')
    <link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}" />
    <link rel="stylesheet" href="{{ asset('css/dataTables.bootstrap4.min.css') }}" />
    <style>
        div.dataTables_wrapper div.dataTables_paginate ul.pagination {
            margin-top: 10px;
        }
    </style>
@endsection
@section('content')
    @if (Session::has('success'))
        <div class="alert alert-success">
            {{ Session::get('success') }}
            @php
                Session::forget('success');
            @endphp
        </div>
    @endif


    <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Home / </span>Files</h4>

    <div class="card">
        <div class="card-title d-flex align-items-center justify-content-between pe-md-4">
            <h5 class="card-header">Files</h5>
            <button data-bs-toggle="modal" data-bs-target="#modalCenter" class="btn btn-sm btn-primary">
                <span class="tf-icons bx bx-plus-circle "></span>&nbsp; Add
            </button>
        </div>
        <div class="card-body">
            <div class="table-responsive text-nowrap">
                <table class="table table-bordered" id="brandtable">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Menu</th>
                            <th>Submenu Name</th>
                            <th>File</th>
                            <th>Status</th>
                            <!-- {{-- <th>Change Status</th> --}} -->
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (count($data) != 0)
                            @php $i = 1 @endphp
                            @foreach ($data as $data)
                                <tr>
                                    <td>
                                        {{ $data->id }}
                                    </td>
                                    <td> {{ $data->title }}</td>
                                    <td> {{ $data->submenu_name }}</td>
                                    <td>
                                        <a href='{{ $data->pdf_file }}' target="_blank">
                                            {{ $data->pdf_title }}
                                        </a>
                                    </td>
                                    <td>
                                        @if ($data->status == 1)
                                            <span class="badge bg-label-primary me-1">Active</span>
                                        @else
                                            <span class="badge bg-label-danger me-1">In-Active</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if ($data->status == 1)
                                            <button class="btn btn-sm btn-danger"
                                                onclick="modalConfirm('In-Active',{{ $data->id }})">
                                                {{-- <i class='bx bx-lock-alt'></i> --}}
                                                <span class="tf-icons bx bx-lock-alt "></span> &nbsp;In-Active
                                            </button>
                                        @else
                                            <button class="btn btn-sm btn-info"
                                                onclick="modalConfirm('Active',{{ $data->id }})">
                                                <span class="tf-icons bx bx-lock-open-alt "></span>&nbsp; &nbsp;
                                                Active&nbsp; &nbsp;
                                            </button>
                                        @endif
                                        <button onclick="editbrand({{ $data }})" class="btn btn-sm btn-secondary">
                                            <span class="tf-icons bx bx-plus-circle "></span>&nbsp; Edit
                                        </button>
                                    </td>
                                </tr>
                                @php $i++ @endphp
                            @endforeach
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Brand add form -->
    <div class="modal fade" id="modalCenter" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <form id="addbrandform" method="post" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalCenterTitle">Add Content</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="page" class="form-label">Select page</label>
                                <select id="page" name='page' class="form-select">
                                    <option value="">Select page</option>
                                    @if (count($pages) != 0)
                                        @php $i = 1 @endphp
                                        @foreach ($pages as $data)
                                            <option value="{{ $data->id }}">{{ $data->submenu_name }}</option>
                                            @php $i++ @endphp
                                        @endforeach
                                    @endif
                                </select>
                                @if ($errors->has('pages'))
                                    <span class="text-danger">{{ $errors->first('pages') }}</span>
                                @endif
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="heading" class="form-label">pdf Heading</label>
                                <input type="text" id="heading" name="heading"class="form-control"
                                    placeholder="Enter Heading For Content" />
                                @if ($errors->has('heading'))
                                    <span class="text-danger">{{ $errors->first('heading') }}</span>
                                @endif
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label for="formFile" class="form-label">pdf File</label>
                                <input class="form-control" type="file" id="formFile" name="formFile"
                                    accept="application/pdf">
                                @if ($errors->has('formFile'))
                                    <span class="text-danger">{{ $errors->first('formFile') }}</span>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                            Close
                        </button>
                        <button type="submit" id="btnFetch2" class="btn btn-primary">Add </button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <!-- brand edit form-->
    <div class="modal fade" id="brandEditmodal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <form id="editbrandform" method="post" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalCenterTitle">Edit Files</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="page2" class="form-label">Select page</label>
                                <select id="page2" name='page2' class="form-select" disabled>
                                    <option value="">Select page</option>
                                    @if (count($pages) != 0)
                                        @php $i = 1 @endphp
                                        @foreach ($pages as $data)
                                            <option value="{{ $data->id }}">{{ $data->submenu_name }}</option>
                                            @php $i++ @endphp
                                        @endforeach
                                    @endif
                                </select>
                                @if ($errors->has('page2'))
                                    <span class="text-danger">{{ $errors->first('page2') }}</span>
                                @endif
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="heading2" class="form-label">pdf Heading</label>
                                <input type="hidden" id="dataid" name="dataid"class="form-control"
                                    placeholder="Enter Heading For Content" />
                                <input type="text" id="heading2" name="heading2"class="form-control"
                                    placeholder="Enter Heading For Content" />
                                @if ($errors->has('heading2'))
                                    <span class="text-danger">{{ $errors->first('heading2') }}</span>
                                @endif
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label for="formFile2" class="form-label">pdf File</label>
                                <input class="form-control" type="file" id="formFile2" name="formFile2"
                                    accept="application/pdf">
                                @if ($errors->has('formFile2'))
                                    <span class="text-danger">{{ $errors->first('formFile2') }}</span>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                            Close
                        </button>
                        <button type="submit" id="btnFetch2" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <!-- Modal confirm-->
    <div class="modal fade" id="modalConfirm" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalCenterTitle">Confirmation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="confirmbody">
                    Are you Sure Want to
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        Close
                    </button>
                    <button type="submit" id="btnFetch" onclick="changestatus()" class="btn btn-primary">Save</button>
                </div>
            </div>
        </div>
    </div>

    <div id='toastsuccess' class="bs-toast toast toast-placement-ex m-2 fade bg-success top-0 end-0" role="alert"
        aria-live="assertive" aria-atomic="true" data-delay="2000">
        <div class="toast-header">
            <i class="bx bx-bell me-2"></i>
            <div class="me-auto fw-semibold">Success</div>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body" id="toast-body"></div>
    </div>

    <div id='toasterror' class="bs-toast toast toast-placement-ex m-2 fade bg-danger top-0 end-0" role="alert"
        aria-live="assertive" aria-atomic="true" data-delay="2000">
        <div class="toast-header">
            <i class="bx bx-bell me-2"></i>
            <div class="me-auto fw-semibold">Error</div>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body" id="toast-error"></div>
    </div>

@endsection
@section('script')
    <!-- <script src="//cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script> -->
    <!-- <script src="https://cdn.ckeditor.com/4.15.0/standard/ckeditor.js"></script> -->
    <script src="{{ asset('js/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('js/additional-methods.min.js') }}"></script>
    <script>
        var id = '';
        $(document).ready(function() {
            $('#brandtable').DataTable();
        });

        $("#addbrandform").validate({
            rules: {
                page: {
                    required: true,
                },
                heading: {
                    required: true,
                },
                formFile: {
                    required: true,
                    extension: "pdf"
                },
            },
            messages: {
                page: {
                    required: "This field is required.",
                },
                heading: {
                    required: "This field is required.",
                },
                formFile: {
                    required: "This field is required.",
                },
            },

            submitHandler: function(form, e) {
                $('#btnFetch2').prop("disabled", true);
                // add spinner to button
                $('#btnFetch2').html(
                    `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`
                );
                e.preventDefault();
                var form = $("#addbrandform");
                var formData = new FormData();

                var page = $("#page").val();
                formData.append("page_id", page);

                var heading = $("#heading").val();
                formData.append("heading", heading);

                var formFile = $('#formFile')[0].files[0];
                formData.append("formFile", formFile);

                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    type: "POST",
                    url: "/add_files",
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                }).done(function(data) {
                    if (data.status == 201) {
                        $('#btnFetch2').prop("disabled", false);
                        $('#btnFetch2').html(`Add`);
                        $('#toasterror').toast('show');
                        if (data.msg.brand_name) {
                            document.getElementById("toast-error").innerHTML = data.msg.brand_name;
                        } else {
                            document.getElementById("toast-error").innerHTML = data.msg;
                        }
                    } else {
                        $('#toastsuccess').toast('show');
                        document.getElementById("toast-body").innerHTML = data.msg;
                        location.reload();
                    }
                });
            },
        });


        function editbrand(data) {
            $('#brandEditmodal').modal('show');
            $('#dataid').val(data.id);
            $("#page2").val(data.page_id);
            $("#heading2").val(data.pdf_title);
        }

        $("#editbrandform").validate({
            rules: {
                dataid: {
                    required: true,
                },
                page2: {
                    required: true,
                },
                heading2: {
                    required: true,
                },
            },
            messages: {
                dataid: {
                    required: "This field is required.",
                },
                page2: {
                    required: "This field is required.",
                },
                heading2: {
                    required: "This field is required.",
                },
            },

            submitHandler: function(form, e) {
                $('#btnFetch3').prop("disabled", true);
                // add spinner to button
                $('#btnFetch3').html(
                    `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`
                );
                e.preventDefault();
                var formData = new FormData();
                // var formData = new FormData();

                var dataid = $("#dataid").val();
                formData.append("id", dataid);

                var page = $("#page2").val();
                formData.append("page_id", page);

                var heading = $("#heading2").val();
                formData.append("heading", heading);


                var formFile = $('#formFile2')[0].files[0];
                if (formFile != undefined) {
                    formData.append("formFile", formFile);
                }

                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    type: "POST",
                    url: "/update_files",
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                }).done(function(data) {
                    if (data.status == 201) {
                        $('#toasterror').toast('show');
                        if (data.msg.brand_name) {
                            document.getElementById("toast-error").innerHTML = data.msg.brand_name;
                        } else {
                            document.getElementById("toast-error").innerHTML = data.msg;
                        }
                    } else {
                        $('#toastsuccess').toast('show');
                        document.getElementById("toast-body").innerHTML = data.msg;
                        location.reload();
                    }
                });
            },
        });

        function modalConfirm(param, brand_id) {
            $('#modalConfirm').modal('show');
            id = brand_id;
            document.getElementById("confirmbody").innerHTML = 'Are You Sure Want to ' + param;
        }

        function changestatus() {
            $('#btnFetch').prop("disabled", true);
            // add spinner to button
            $('#btnFetch').html(
                `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`
            );

            var formData = new FormData();
            formData.append("brand_id", id);

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "POST",
                url: "/update_files_status",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
            }).done(function(data) {
                if (data.status == 201) {
                    $('#toasterror').toast('show');
                    if (data.msg.brand_name) {
                        document.getElementById("toast-error").innerHTML = data.msg.brand_name;
                    } else {
                        document.getElementById("toast-error").innerHTML = data.msg;
                    }
                    setTimeout(function() {
                        $('#modalConfirm').modal('hide');
                        location.reload(true);
                    }, 1000);
                } else {
                    $('#toastsuccess').toast('show');

                    document.getElementById("toast-body").innerHTML = data.msg;
                    // location.reload();
                    setTimeout(function() {
                        $('#modalConfirm').modal('hide');
                        location.reload(true);
                    }, 1000);
                }
            });

        }

        $('#formFile').change(function() {
            let reader = new FileReader();
            reader.onload = (e) => {
                $('#preview').attr('src', e.target.result);
            }
            reader.readAsDataURL(this.files[0]);
        });
    </script>
@endsection