@extends('layouts.template')
@section('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js" integrity="sha512-8QFTrG0oeOiyWo/VM9Y8kgxdlCryqhIxVeRpWSezdRRAvarxVtwLnGroJgnVW9/XBRduxO/z1GblzPrMQoeuew==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.css" integrity="sha512-In/+MILhf6UMDJU4ZhDL0R0fEpsp4D3Le23m6+ujDWXwl3whwpucJG1PEmI3B07nyJx+875ccs+yX2CqQJUxUw==" crossorigin="anonymous" />
<div class="card mb-5 mb-xl-10">
    <div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse" data-bs-target="#kt_account_profile_details" aria-expanded="true" aria-controls="kt_account_profile_details">
        <div class="card-title m-0">
            <h3 class="fw-bolder m-0">Bulk Uploads</h3>
        </div>
    </div>
    <div id="kt_account_profile_details">
       <form method="POST" action="{{ route('sdm.store') }}" enctype="multipart/form-data" id="form">
        	@csrf
            <div class="card-body border-top p-9">
                <table class="table table-flush align-middle table-row-bordered table-row-solid gy-4 gs-9">
					<thead class="border-gray-200 fs-5 fw-bold bg-lighten">
						<tr>
							<th class="min-w-400px ps-9">Moduls</th>
							<th class="min-w-0px ps-9">Template</th>
							<th class="min-w-0px ps-9">Action</th>
						</tr>
					</thead>
					<tbody class="fs-6 fw-bold text-gray-600">
						<tr>
							<td class="ps-9">Detail Result BIPI</td>
							<td class="ps-9">
								<a href="#" class="btn btn-light-primary btn-sm"><i class="fas fa-download fs-4 me-2"></i> Download Template</a>
							</td>
							<td class="ps-9">
								<a href="#" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#modalUploadResultBipi"><i class="fas fa-upload fs-4 me-2"></i> Upload Template</a>
							</td>
						</tr>
						<tr>
							<td class="ps-9">Monthly KPI</td>
							<td class="ps-9">
								<a href="#" class="btn btn-light-primary btn-sm"><i class="fas fa-download fs-4 me-2"></i> Download Template</a>
							</td>
							<td class="ps-9">
								<a href="#" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#modalUploadMonthlyKpi"><i class="fas fa-upload fs-4 me-2"></i> Upload Template</a>
							</td>
						</tr>
						<tr>
							<td class="ps-9">Assesment</td>
							<td class="ps-9">
								<a href="#" class="btn btn-light-primary btn-sm"><i class="fas fa-download fs-4 me-2"></i> Download Template</a>
							</td>
							<td class="ps-9">
								<a href="#" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#modalUploadAssesment"><i class="fas fa-upload fs-4 me-2"></i> Upload Template</a>
							</td>
						</tr>
					</tbody>
				</table>
            </div>    
        </form>
    </div>
</div>

<!-- START MODAL ASSESMENT -->
<div class="modal fade" id="modalUploadAssesment" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Upload Hasil Assesment</h5>
                <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                    <span class="svg-icon svg-icon-2x"></span>
                </div>
            </div>
            <form method="post" id="form" enctype="multipart/form-data" action="#">
                @csrf
                <div class="row p-8">
                    <div class="col-lg-12">
                        <label class="col-lg-4 col-form-label required fw-bold fs-6">Upload File</label>
                        <div class="col-lg-12 fv-row">
                            <input type="file" class="form-control form-control-lg form-control-solid" name="file_assesment" required/>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light-primary fw-bold" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary ">Upload</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- END MODAL ASSESMENT -->

<!-- START MODAL MONTHLY KPI -->
<div class="modal fade" id="modalUploadMonthlyKpi" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Upload Monthly KPI</h5>
                <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                    <span class="svg-icon svg-icon-2x"></span>
                </div>
            </div>
            <form method="post" id="form" enctype="multipart/form-data" action="#">
                @csrf
                <div class="row p-8">
                    <div class="col-lg-12">
                        <label class="col-lg-4 col-form-label required fw-bold fs-6">Upload File</label>
                        <div class="col-lg-12 fv-row">
                            <input type="file" class="form-control form-control-lg form-control-solid" name="file_monthly_kpi" required/>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light-primary fw-bold" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary ">Upload</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- END MODAL MONTHLY KPI -->

<!-- START MODAL RESULT BIPI -->
<div class="modal fade" id="modalUploadResultBipi" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Upload Result BIPI</h5>
                <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                    <span class="svg-icon svg-icon-2x"></span>
                </div>
            </div>
            <form method="post" id="form" enctype="multipart/form-data" action="#">
                @csrf
                <div class="row p-8">
                    <div class="col-lg-12">
                        <label class="col-lg-4 col-form-label required fw-bold fs-6">Upload File</label>
                        <div class="col-lg-12 fv-row">
                            <input type="file" class="form-control form-control-lg form-control-solid" name="file_result_bipi" required/>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light-primary fw-bold" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary ">Upload</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- END MODAL RESULT BIPI -->


<!-- <script type="text/javascript">
    $(document).ready(function() {
       
        // $(".select2").select2({});
        // $("#new_territory").select2({
        //     placeholder: 'Pilih Salah Satu',
        //     allowClear: true
        // });

        $("#region").on('change', function(e) {
            $("#distributor").val('').trigger('change');
            $("#territory").val('').trigger('change');
        });

        $("#distributor").on('change', function(e) {
            $("#territory").val('').trigger('change');
        });

        $('#territory').select2({
            ajax: {
                delay: 500,
                url:"{{ route('ajax.territory') }}",
                dataType: 'json',
                data: function(params) {
                    var query = {
                        q: params.term,
                        sp_code: $("#distributor").val(),
                    };
                    return query;
                },
            },
            placeholder: 'Pilih Salah Satu',
            allowClear: true
        });

        $('#distributor').select2({
            ajax: {
                delay: 500,
               url:"{{ route('ajax.distributor') }}",
                dataType: 'json',
                data: function(params) {
                    var query = {
                        q: params.term,
                        region: $("#region").val(),
                    };
                    return query;
                },
            }
        });


    });
</script> -->
@endsection