@extends('layout.base')

@section('action')

@endsection


@section('content')
<div class="row">
    <div class="col-md-12 mb-5">
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-row-bordered ">
                        <thead>
                            <tr>
                                <th scope="col">Flag</th>
                                <th scope="col">Federation</th>
                                <th scope="col">Contact Number</th>
                                <th scope="col">Contact Email</th>
                                <th scope="col">Address</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><img src="{{ asset($user->country->flag_path) }}" alt="countryFlag" style="height:25px; border: 1px solid grey;"></td>
                                <td>{{ $user->name ?? '-' }}</td>
                                <td>{{ $user->phone_number ?? '-' }}</td>
                                <td>{{ $user->email ?? '-' }}</td>
                                <td>{{ $user->address ?? '-' }}</td>
                                <td>
                                    <button class="btn btn-icon btn-primary" data-bs-toggle="modal" data-bs-target="#modalEdit">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                </td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Upload Music</h4>
            </div>
            <div class="card-body">
            <form action="{{ route('federation.update-anthem') }}" 
                class="dropzone w-100 d-flex flex-wrap justify-content-center" 
                id="inputAnthem">

                <div class="dz-message text-primary w-100">
                    <div class="d-flex flex-column align-items-center justify-content-center py-10 w-100">
                        <h3 class="text-primary">Upload Music</h3>
                        <p>(Only .mp3 up to 10MB allowed)</p>
                    </div>
                </div>

                <div class="dz-preview dz-file-preview dz-add-btn" 
                    style="cursor:pointer; display:flex; align-items:center; justify-content:center; width:120px; height:120px; border:2px dashed #007bff; border-radius:10px; margin:5px;">
                    <span style="font-size:2rem; color:#007bff;">+</span>
                </div>
            </form>
                <div id="previews"></div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('modal')
<div class="modal fade" id="modalEdit" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" role="dialog" aria-labelledby="modalTitleId" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitleId">Update Form</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                ></button>
            </div>
            <div class="modal-body">
                <form action="{{ route('federation.update') }}" method="POST" id="formUpdate">
                    @csrf
                    <div class="mb-3">
                        <label for="" class="form-label">Address</label>
                        <textarea name="address" class="form-control" rows="3" autocomplete="off"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" form="formUpdate" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
@if ($errors->any())
<script>
    Swal.fire("Invalid Input Value", "", "error")
</script>
@endif
@if (session('success'))
<script>
    Swal.fire("{{ session('success') }}", "", "success")
</script>
@endif
<script>
    Dropzone.autoDiscover = false;
    $(function () {
        const url = "{{ route('federation.update-anthem') }}"
        const csrf = "{{ csrf_token() }}"
        const mockFiles = {!! empty($mockFile) ? "''" : $mockFile !!}
        const existingFilesUrl = {!! $existingFileUrl !!}

        let dropzoneAnthem = new Dropzone(`#inputAnthem`, {
            url: url,
            paramName: "anthem",
            // acceptedFiles: 'audio/*,.mp3',
            acceptedFiles: '.mp3',
            maxFiles: 5,
            maxFilesize: 10,
            headers: {
                'X-CSRF-TOKEN': csrf
            },
            parallelUploads: 1,
            addRemoveLinks: true,
            createImageThumbnails: false,
            clickable: [".dz-add-btn", ".dz-message"],
            init: function () {
                if (existingFilesUrl != "") {
                    for (let index = 0; index < mockFiles.length; index++) {
                        let mockFile = mockFiles[index]
                        this.emit("addedfile", mockFile);

                        this.emit("complete", mockFile);

                        mockFile.previewElement.querySelector("[data-dz-name]").innerText = mockFile.name;
                        if (mockFile.previewElement.querySelector("a")) {
                            let link = document.createElement("a");
                            link.href = existingFilesUrl[index];
                            link.innerText = "Download";
                            link.setAttribute("download", mockFile.name);
                            link.classList.add("dz-download");
                            link.classList.add("btn");
                            link.classList.add("btn-primary");
                            mockFile.previewElement.appendChild(link);
                        }
                        this.files.push(mockFile);
                    }
                }

                this.on("maxfilesexceeded", function(file) {
                    this.removeAllFiles();
                    this.addFile(file);
                });

                this.on("error", function(file, errorMessage, xhr) {
                    if (file.status === Dropzone.ERROR)
                        this.removeFile(file);
                });

                this.on("removedfile", function(file) {
                    $.ajax({
                        type: "POST",
                        url: `{{ route("federation.remove-anthem") }}`,
                        data: {
                            _token: "{{ csrf_token() }}",
                            id: file.id,
                        },
                        dataType: "json",
                        success: function (response) {
                            Swal.fire("Music Deleted Successfully", "", "success")
                        },
                        error: function() {
                            Swal.fire("Oops! Something Went Wrong", "", "error")
                        }
                    });
                });
            }
        });
    });
</script>
@endsection