@extends('layouts.administrator.master')

@section('title')
    Download
@endsection

@section('content')
    <div class="nk-block-head">
        <div class="nk-block-head-content">
            <div class="nk-block-between-md g-4">
                <div class="nk-block-head-content">
                    <h3 class="nk-block-title page-title">
                        Download
                    </h3>
                    <div class="nk-block-des">
                        <p>Kamu mempunyai akses untuk mengelola halaman download</p>
                    </div>
                </div>
                <div class="nk-block-head-content">
                    <a href="{{ route('admin.landingPage') }}" class="btn btn-primary btn-sm"><em
                            class="icon ni ni-arrow-left"></em>
                        Kembali</a>
                </div>
            </div>
        </div>
    </div><!-- .nk-block-head -->

    <div class="nk-block">
        <div class="card card-preview">
            <div class="card-inner">
                <div class="row g-gs">
                    <div class="col-md-4">
                        <ul class="nav link-list-menu border border-light rounded m-0" role="tablist">
                            <li><a class="active" data-bs-toggle="tab" href="#tabDownload" aria-selected="true"
                                    role="tab">Download</a></li>
                            <li><a data-bs-toggle="tab" href="#tabDownloadCategory" aria-selected="false" role="tab"
                                    class="" tabindex="-1">Kategori Download</a></li>
                        </ul>
                    </div>
                    <div class="col-md-8">
                        <div class="tab-content">
                            <div class="tab-pane active show" id="tabDownload" role="tabpanel">
                                <div class="text-end pb-3">
                                    <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#create-download"
                                        class="btn btn-primary">Buat Download
                                    </a>
                                </div>
                                <table class="datatable-init nk-tb-list nk-tb-ulist" data-auto-responsive="false">
                                    <thead>
                                        <tr class="nk-tb-item nk-tb-head">
                                            <th class="nk-tb-col"><span class="sub-text">Judul</span></th>
                                            <th class="nk-tb-col"><span class="sub-text">Kategori</span></th>
                                            <th class="nk-tb-col"><span class="sub-text">Status</span></th>
                                            <th class="nk-tb-col nk-tb-col-tools text-end">
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($download as $key => $value)
                                            <tr class="nk-tb-item">
                                                <td class="nk-tb-col">
                                                    <div class="user-card">
                                                        <div class="user-info">
                                                            {{ Str::substr($value->title, 0, 20) . '...' }}
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="nk-tb-col">
                                                    <div class="user-card">
                                                        <div class="user-info">
                                                            {{ Str::substr($value->downloadCategory->name, 0, 20) . '...' }}
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="nk-tb-col">
                                                    <div class="user-card">
                                                        <div class="user-info">
                                                            {{ $value->status == 1 ? 'Private' : 'Publik' }}
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="nk-tb-col nk-tb-col-tools">
                                                    <ul class="nk-tb-actions gx-1">
                                                        <li class="nk-tb-action-hidden">
                                                            <a href="javascript:void(0)" data-bs-toggle="modal"
                                                                data-bs-target="#edit-download{{ $value->id }}"
                                                                class="btn btn-trigger btn-icon" data-bs-toggle="tooltip"
                                                                data-bs-placement="top" title="Perbarui">
                                                                <em class="icon ni ni-edit-fill"></em>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <div class="drodown">
                                                                <a href="#"
                                                                    class="dropdown-toggle btn btn-icon btn-trigger"
                                                                    data-bs-toggle="dropdown"><em
                                                                        class="icon ni ni-more-h"></em></a>
                                                                <div class="dropdown-menu dropdown-menu-end">
                                                                    <ul class="link-list-opt no-bdr">
                                                                        <li><a
                                                                                href="{{ route('admin.services.landingPage.download.delete', ['slug' => $value->slug]) }}"><em
                                                                                    class="icon ni ni-na"></em><span>Hapus</span></a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </td>
                                            </tr><!-- .nk-tb-item  -->
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <div class="tab-pane" id="tabDownloadCategory" role="tabpanel">
                                <div class="text-end pb-3">
                                    <a onclick="funcBtnDownloadCategory()" href="javascript:void(0)" data-bs-toggle="modal"
                                        data-bs-target="#create-download-category" class="btn btn-primary">Buat Kategori
                                        Download</a>
                                </div>
                                <table class="datatable nowrap table" id="datatableDownloadCategory">
                                    <thead>
                                        <tr>
                                            <th class="nk-tb-col"><span class="sub-text">Nama</span></th>
                                            <th>#</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>


                            @push('script')
                                <script>
                                    NioApp.DataTable('#datatableDownloadCategory', {
                                        processing: true,
                                        serverSide: true,
                                        initComplete: function(settings, json) {
                                            $('#datatableDownloadCategory_filter input').css('display', 'none');
                                        },
                                        ajax: {
                                            url: '{{ route('admin.services.landingPage.downloadCategory.listDownloadCategory') }}',
                                            beforeSend: function() {
                                                loadSpin(true, '#datatableDownloadCategory');
                                            },
                                            complete: function() {
                                                loadSpin(false, '#datatableDownloadCategory');
                                            },
                                            type: 'POST',
                                            headers: {
                                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                            },
                                            data: {}
                                        },
                                        columns: [{
                                                data: 'name'
                                            },
                                            {
                                                data: 'action',
                                                className: 'text-center'
                                            },
                                        ],
                                        responsive: {
                                            details: true
                                        },
                                    });

                                    function funcBtnDownloadCategory() {
                                        $('#titleDownloadCategory').html('Buat download');
                                        $("#btnCreateDownloadCategory").show();
                                        $("#btnUpdateDownloadCategory").hide();
                                        $("[name=name]").val("");
                                        $('.form-group input[name="name"]').closest('.form-group').removeClass('focused');
                                    }
                                </script>
                            @endpush

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- .nk-block -->
    {{-- Create Download --}}
    <div class="modal fade" role="dialog" id="create-download">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <a href="#" class="close" data-bs-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                <div class="modal-header">
                    <h5>Buat download</h5>
                </div>
                <div class="modal-body">
                    <form action="{{ route('admin.services.landingPage.download.store') }}" enctype="multipart/form-data"
                        method="POST">
                        @csrf
                        <div class="row gy-2">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <input type="text" name="title"
                                        class="form-control form-control-lg form-control-outlined" id="outlined"
                                        required>
                                    <label class="form-label-outlined" for="outlined">Judul</label>
                                </div>
                                <div class="form-group">
                                    <input type="text" name="link"
                                        class="form-control form-control-lg form-control-outlined" id="outlined"
                                        required>
                                    <label class="form-label-outlined" for="outlined">URL</label>
                                </div>
                                <div class="form-group">
                                    <select class="form-control form-control-lg" name="download_category_id"
                                        id="">
                                        <option value="">Pilih Kategori</option>
                                        @foreach ($downloadCategory as $key => $value)
                                            <option value="{{ $value->id }}">{{ $value->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <select class="form-control form-control-lg" name="status" id="">
                                        <option value="">Pilih Status</option>
                                        <option value="1">Private
                                        </option>
                                        <option value="2">Publik
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-12">
                                <ul class="align-center justify-content-end flex-wrap flex-sm-nowrap gx-4 gy-2">
                                    <li>
                                        <button type="submit" class="btn btn-primary">Buat</button>
                                    </li>
                                    <li>
                                        <a href="#" data-bs-dismiss="modal" class="link link-light">Batal</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </form>
                </div><!-- .modal-body -->
            </div><!-- .modal-content -->
        </div><!-- .modal-dialog -->
    </div>
    {{-- Update Download --}}
    @foreach ($download as $key => $dw)
        <div class="modal fade" role="dialog" id="edit-download{{ $dw->id }}">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <a href="#" class="close" data-bs-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                    <div class="modal-header">
                        <h5>Perbarui download : <span class="text-primary">{{ $dw->title }}</span></h5>
                    </div>
                    <div class="modal-body">
                        <form action="{{ route('admin.services.landingPage.download.update', ['slug' => $dw->slug]) }}"
                            enctype="multipart/form-data" method="POST">
                            @csrf
                            <div class="row gy-2">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <input type="text" name="title" value="{{ $dw->title }}"
                                            class="form-control form-control-lg form-control-outlined" id="outlined"
                                            required>
                                        <label class="form-label-outlined" for="outlined">Judul</label>
                                    </div>
                                    <div class="form-group">
                                        <input type="text" name="link" value="{{ $dw->link }}"
                                            class="form-control form-control-lg form-control-outlined" id="outlined"
                                            required>
                                        <label class="form-label-outlined" for="outlined">URL</label>
                                    </div>
                                    <div class="form-group">
                                        <select class="form-control form-control-lg" name="download_category_id"
                                            id="">
                                            <option value="">Pilih Kategori</option>
                                            @foreach ($downloadCategory as $key => $value)
                                                <option value="{{ $value->id }}"
                                                    {{ $value->id == $dw->download_category_id ? 'selected' : '' }}>
                                                    {{ $value->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <select class="form-control form-control-lg" name="status" id="">
                                            <option value="">Pilih Status</option>
                                            <option value="1" {{ $dw->status == 1 ? 'selected' : '' }}>Private
                                            </option>
                                            <option value="2" {{ $dw->status == 2 ? 'selected' : '' }}>Publik
                                            </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <ul class="align-center justify-content-end flex-wrap flex-sm-nowrap gx-4 gy-2">
                                        <li>
                                            <button type="submit" class="btn btn-primary">Perbarui</button>
                                        </li>
                                        <li>
                                            <a href="#" data-bs-dismiss="modal" class="link link-light">Batal</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </form>
                    </div><!-- .modal-body -->
                </div><!-- .modal-content -->
            </div><!-- .modal-dialog -->
        </div>
    @endforeach

    {{-- Create download Category --}}
    <div class="modal fade" role="dialog" id="create-download-category">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <a href="#" class="close" data-bs-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                <div class="modal-header">
                    <h5 id="titleDownloadCategory">Buat kategori download</h5>
                </div>
                <div class="modal-body">
                    <form id="form-create-download-category" enctype="multipart/form-data">
                        {{-- <form action="{{ route('admin.services.landingPage.downloadCategory.store') }}"
                        enctype="multipart/form-data" method="POST"> --}}
                        @csrf
                        <div class="row gy-2">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <input type="text" name="name"
                                        class="form-control form-control-lg form-control-outlined" id="outlined"
                                        required>
                                    <label class="form-label-outlined" for="outlined">Nama Kategori</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <ul class="align-center justify-content-end flex-wrap flex-sm-nowrap gx-4 gy-2">
                                    <li>
                                        <div id="btnCreateDownloadCategory">
                                            <button onclick="functionCreateDownloadCategory()" type="button"
                                                class="btn btn-primary">Buat</button>
                                        </div>
                                        <div id="btnUpdateDownloadCategory"></div>
                                    </li>
                                    <li>
                                        <a href="#" data-bs-dismiss="modal" class="link link-light">Batal</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </form>
                </div><!-- .modal-body -->
            </div><!-- .modal-content -->
        </div><!-- .modal-dialog -->
    </div>


    @push('script')
        <script>
            function functionCreateDownloadCategory() {
                $('#create-download-category').modal('toggle');
                var formData = new FormData($('#form-create-download-category')[0]);

                $.ajax({
                    url: '{{ route('admin.services.landingPage.downloadCategory.store') }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(r) {
                        NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                            position: "top-right"
                        });
                        $("#datatableDownloadCategory").DataTable().ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            };

            function getDataDownloadCategory(id) {
                $("#btnCreateDownloadCategory").hide();
                $("#btnUpdateDownloadCategory").show();

                $.ajax({
                    url: '{{ route('admin.services.landingPage.downloadCategory.getDownloadCategory') }}',
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        id: id
                    },
                    success: function(r) {
                        $("#create-download-category").modal('show');
                        $('#titleDownloadCategory').html('Perbarui kategori berita : ' + r[0].name);

                        $("[name=name]").val(r[0].name);
                        $('.form-group input[name="name"]').closest('.form-group').addClass('focused');

                        $("#btnUpdateDownloadCategory").html('<button onclick="functionUpdateDownloadCategory(' + r[
                            0].id + ')" type="button" class="btn btn-primary">Perbarui</button>');
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }

            function functionUpdateDownloadCategory(id) {
                $('#create-download-category').modal('toggle');
                var formData = new FormData($('#form-create-download-category')[0]);

                $.ajax({
                    url: '/admin/landing-page/download/update-download-category/' + id,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(r) {
                        NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                            position: "top-right"
                        });
                        $("#datatableDownloadCategory").DataTable().ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }

            function deletedDataDownloadCategory(id) {
                $.ajax({
                    url: '/admin/landing-page/download/delete-download-category/' + id,
                    type: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        id: id
                    },
                    success: function(r) {
                        NioApp.Toast(r.message, (r.success ? "success" : "error"), {
                            position: "top-right"
                        });
                        $("#datatableDownloadCategory").DataTable().ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire({
                            title: 'Error!',
                            text: error.responseJSON.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }
        </script>
    @endpush
@endsection