@extends('layouts.app')


@section('content')
 <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header" style="background-color: #632b8d; color:white;">
                        <div style="display: flex; justify-content: space-between; align-items: center;">
                        <span id="card_title">
                                {{ __('Upload Customer') }}
                            </span>
                             <div class="float-right">
                                 <a class="btn btn-sm btn-danger"href="{{ route('customer.index') }}"> Kembali</a>
                                 <a class="btn btn-sm " data-toggle="modal" style="background-color: #a9ce37; color:#632b8d;" data-target="#modal-exel">
                                        Unduh Template
                                    </a>
                              </div>
                        </div>
                    </div>

                    <div class="card-body">
                        <form action="{{ route('uploadStore') }}" role="form" enctype="multipart/form-data" method="POST" id="excel-upload-form">
                            @csrf
                             <input type="file" name="file" accept=".xlsx, .xls" accept-language="id-ID" required>
                             <button name="action" value="save_and_close" class="btn btn-seccondary"  id="excel-file-input" type="submit" style="background-color: #632b8d; color:white;">Submit</button>

                        </form>

                        <div class="row mb-4">
                            <div class="col-md-3">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="modal-exel">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Anda Ingin Unduh Template?</h4>
                    </div>
                    <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Tutup</button>
                            <button id="unduh"  onclick="location.href='{{ secure_asset('excel/template_customer.xlsx') }}'" type="button" class="btn btn-success" >Unduh</button>
                        </div>
                </div>

            </div>
    </div>


@endsection
@section('js')
<script>
        document.addEventListener("DOMContentLoaded", function () {
            const btnSimpan = document.getElementById("unduh");
            btnSimpan.addEventListener("click", function (event) {
                event.preventDefault();
                $('#modal-exel').modal('hide');
                $.ajax({
                    url: 'excel/template_customer.xlsx',
                    method: 'GET',
                    success: function(response) {

                        alert('Template berhasil di unduh')

                    },
                })
            })
        })
    </script>
@endsection