@extends('layouts.admin')
@section('content')
<!-- pahe header -->
<div class="page-header">
    <div class="page-header-left d-flex align-items-center">
        <div class="page-header-title">
            @isset($title)
            <h5 class="m-b-10">{{ $title }}</h5>
            @endisset
        </div>
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
            <li class="breadcrumb-item">
                {{$title}}
            </li>
        </ul>
    </div>
    <div class="page-header-right ms-auto">
        <div class="page-header-right-items">
            <div class="d-flex d-md-none">
                <a href="javascript:void(0)" class="page-header-right-close-toggle">
                    <i class="feather-arrow-left me-2"></i>
                    <span>Back</span>
                </a>
            </div>
            <div class="d-flex align-items-center gap-2 page-header-right-items-wrapper">
                <a href="{{ route('admin.sounds.create') }}" class="btn btn-danger ">
                    <i class="feather-plus me-2"></i>
                    <span>Add Single {{$title}}</span>
                </a>

                <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#bulkSongModal">
                    <i class="feather-plus me-2"></i>
                    <span>Add Bulk {{$title}}</span>
                </a>
                <div class="dropdown">
                    <a class="btn btn-icon btn-light-brand" data-bs-toggle="dropdown" data-bs-offset="0, 10" data-bs-auto-close="outside">
                        <i data-bs-toggle="tooltip" title="Filter" class="feather-filter"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end">

                        <a href="#" id="exportExcel" class="dropdown-item">
                            <i class="feather-chevron-right me-3"></i>
                            <span>Export Excel</span>
                        </a>
                        <form method="POST" id="import_form" enctype="multipart/form-data">
                            <input type="file" name="file" class="import_file" style="display:none">
                        </form>
                        <a href="#" class="dropdown-item import_btn">
                            <i class="feather-chevron-right me-3"></i>
                            <span>Import File</span>
                        </a>
                    </div>
                </div>

            </div>
        </div>
        <div class="d-md-none d-flex align-items-center">
            <a href="javascript:void(0)" class="page-header-right-open-toggle">
                <i class="feather-align-right fs-20"></i>
            </a>
        </div>
    </div>
</div>

<!-- end page header -->
<div class="main-content">
    <div class="row">
        <!-- table start -->

        <div class="col-lg-12">

            <div class="card stretch stretch-full">
                <div class="card-body p-0">
                    <div class="">
                        <div class="dataTables_wrapper dt-bootstrap5 no-footer">
                            <div class="row">
                                <div class="col-sm-12 col-md-3">
                                    <div class="" data-select2-id="select2-data-51-2rvl">
                                        <label class="form-label">Select Category </label>
                                        <select class="form-select select2-hidden-accessible" id="cat_select" data-select2-selector="default" data-select2-id="select2-data-1-iv8w" tabindex="-1" aria-hidden="true">
                                            <option value="" data-select2-id="select2-data-3-svma">Select</option>
                                                                                    </select>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-3">
                                    <div class="" data-select2-id="selectStatus">
                                        <label class="form-label">Select Status </label>
                                        <select class="form-select s" id="active_select" data-select2-selector="default" tabindex="-1" aria-hidden="true">
                                            <option value="">Select</option>
                                            <option value=1>Active</option>
                                            <option value=0>Inactive</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row dt-row px-0">

                                <div class="col-12">
                                    <table id="listTable" class="table table-hover dataTable no-footer m-0" aria-describedby="paymentList_info">
                                        <thead>

                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-lg-12 col-md-12 m-3">
                                    <button id="deleteSel" class="btn btn-danger" data-url="{{ route('admin.sounds.destroy',0) }}">Delete Selected</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
@push('scripts')
@php $action='Add' @endphp
<!-- category modal -->
<!-- Modal -->
<div class="modal fade" id="bulkSongModal" tabindex="-1" aria-labelledby="bulkSongModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form class="form-horizontal" id="bulkSongForm" role="form" action="{{url( config('app.admin_url') .'/sounds')}}" method="post" enctype="multipart/form-data">
            {{ csrf_field() }}
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Bulk Songs</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="">
                        <div class="mb-4">
                            <label for="taskName" class="form-label">Category Name</label>
                            <select class="form-select select2-hidden-accessible" name="cat_id[]" data-select2-selector="default" data-select2-id="select2-data-2-iv8w" tabindex="-1" aria-hidden="true" multiple>
                                                            </select>
                            <span class="error cat_id_error"></span>
                        </div>
                        <div class="mb-4">
                            <label for="sound_name" class="form-label">Sound * (Only .mp3 format are allowed)</label>
                            <input type="file" class="form-control" name="sound_name[]" multiple>
                            <span class="error sound_name_error"></span>
                        </div>

                        <div class="mb-4">
                            <label for="active" class="form-label">Status</label><br />
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="active" id="inlineRadio1" value=1 checked>
                                <label class="form-check-label form-label" for="inlineRadio1">Active</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="active" id="inlineRadio2" value=0>
                                <label class="form-check-label form-label" for="inlineRadio2">Inactive</label>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <!-- <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button> -->
                    <button type="submit" class="btn btn-primary">Add</button>
                </div>
            </div>
        </form>
    </div>
</div>


<!-- end category modal -->
<script src="{{ asset('admin/js/table-chk.js') }}"></script>
<!-- Include DataTables JS & CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<script src="{{ asset('admin/js/select2.min.js') }}"></script>
<script src="{{ asset('admin/js/select2-active.min.js') }}"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<!-- Buttons -->
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script>
    function listing() {
        table = $('#listTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: '{{ route("admin.sounds.index") }}',
                data: function(d) {
                    // Add extra search params here
                    d.category = $('#cat_select').val(); // select box
                    d.active = $('#active_select').val(); // select box
                }
            },
            buttons: [{
                extend: 'excelHtml5',
                title: 'Data Export',
                className: 'd-none', // Hide by default
                exportOptions: {
                  columns: [1, 4, 6,7,8,9]
                }
            }],
            scrollX: true,
            responsive: true,
            order: [
                [1, 'desc']
            ],
            columns: [{
                    title: '<div class="btn-group mb-1"><div class="custom-control custom-checkbox ms-1"><input type="checkbox" class="custom-control-input" id="checkAllPayment"><label class="custom-control-label" for="checkAllPayment"></label></div></div>',
                    data: 'checkbox',
                    name: 'checkbox',
                    orderable: false,
                    searchable: false,
                    className: 'wd-30 sorting sorting_asc'
                }, {
                    title: 'Id',
                    data: 'sound_id',
                    name: 'sound_id'
                },
                {
                    title: 'Image',
                    data: 'image',
                    name: 'image',
                    orderable: false,
                    searchable: false,
                },
                {
                    title: 'Title',
                    data: 'title',
                    name: 'title'
                },
                {
                    title: 'Category',
                    data: 'category',
                    name: 'category'
                },
                {
                    title: 'Sound',
                    data: 'sound',
                    name: 'sound',
                    orderable: false,
                    searchable: false,
                },
                {
                    title: 'Album',
                    data: 'album',
                    name: 'album'
                },
                {
                    title: 'Artist',
                    data: 'artist',
                    name: 'artist'
                },
                {
                    title: 'Status',
                    data: 'active',
                    name: 'active'
                },
                {
                    title: 'Duration',
                    data: 'duration',
                    name: 'duration'
                },

                {
                    title: 'Added On',
                    data: 'created_at',
                    name: 'created_at'
                },
                {
                    title: 'Actions',
                    data: 'actions',
                    name: 'actions',
                    orderable: false,
                    searchable: false,
                    className: 'text-end pr-4'
                }
            ]
        });

    }

    $(document).ready(function() {
        listing();
        $("#checkAllPayment").change(function() {
            $('.form-check-input').prop('checked', this.checked);
        });

        $('#cat_select, #active_select').on('change', function() {
            table.ajax.reload();
        });
        $('#bulkSongModal').on('show.bs.modal', function(event) {
            // Example: update modal content
            var modal = $(this);
            modal.find('.form-select').val(null).trigger('change');
            modal.find('.form-control').val('');
            modal.find('.form-check-input').val('');
        });
        $('#bulkSongForm').on('submit', function(e) {
            e.preventDefault();

            var url = $(this).attr('action');
            var formData = new FormData(this);
            form = $(this);
            // Disable submit button
            form.find('button[type="submit"]').prop('disabled', true).text('Saving...');

            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(data) {
                    if (data.status == false) {
                        let errors = data.errors;
                        $('.error').html('');
                        $.each(errors, function(key, valueObj) {
                            $('.' + key + '_error').html(valueObj);
                        });
                    } else {
                        $('#bulkSongModal').modal('hide');
                        table.ajax.reload();
                        $.notify(data.message, "success", {
                            autoHideDelay: 4000
                        });
                    }
                },
                error: function(xhr) {
                    // Show errors if any
                    let errors = xhr.responseJSON?.errors;
                    let errorHtml = '<div class="alert alert-danger"><ul>';
                    if (errors) {
                        $.each(errors, function(key, value) {
                            errorHtml += '<li>' + value[0] + '</li>';
                        });
                    } else {
                        errorHtml += '<li>Something went wrong</li>';
                    }
                    errorHtml += '</ul></div>';

                    form.find('.alert').remove(); // Remove old alerts
                    form.prepend(errorHtml);
                },
                complete: function() {
                    form.find('button[type="submit"]').prop('disabled', false).text('Save');
                }
            });

        });

        $('#exportExcel').on('click', function() {
            table.button('.buttons-excel').trigger();
        });

        $('.import_btn').click(function() {
            $('.import_file').trigger('click');
        });
        $(".import_file").change(function() {
            $.ajax({
                url: "{{ route('admin.import')}}",
                type: "POST",
                processData: false,
                contentType: false,
                data: new FormData($('#import_form')[0]),
                success: function(data) {
                    if(data.status==true){
                      table.ajax.reload();
                      $.notify(data.msg, "success", {
                            autoHideDelay: 4000
                        });
                    }else{
                        $.notify(data.msg, "danger", {
                            autoHideDelay: 4000
                        });
                    }
                }
            });
        });
    });

    function formModal(id = 0, action = '') {
        let url = "{{ route('admin.sounds.edit', ['sound' => ':id']) }}";
        url = url.replace(':id', id);
        $('#formModal').html('<div class="text-center">Loading...</div>');
        $.ajax({
            type: 'GET',
            url: url,
            data: {
                action: action
            },
            success: function(data) {
                $('#formModal').html(data);
                $('#formModal').modal('show');
            },
            error: function() {
                $('#formModal').html('<div class="text-danger text-center">Failed to load content.</div>');
            }
        });
    }

    function audio_file(sound_id) {
        if (sound_id > 0) {
            $.post("{{ route('admin.audio_play') }}", 'id=' + sound_id, function(data) {
                $('.audio_file_' + sound_id).html(data);
            });
        }

    }
</script>
@endpush