@extends('layouts.layout')

@section('body_class', 'nav-md')

@section('body_content')
<style>
    th {
        vertical-align: middle !important;
        text-align: center;
    }
</style>
    <div class="container body">
        <div class="main_container">
            @include('includes.sidebar')
            <div class="right_col" role="main">
                <div class="page-title">
                    <div class="title_left">
                        <div class="row">
                            <div class="col-xs-6 col-sm-6 col-md-6">
                                <h2 class="title-dashboard text-left">
                                    <h3><i class="fa fa-cubes"></i> Mutasi Pawn</h3>
                                </h2>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
                <style>
                    .bottom-align {
                        vertical-align: bottom;
                    }
                </style>

                <div class="row">
                    <div class="col-xs-10 col-sm-10">
                        <div class="x_title">
                            Filter
                        </div>
                        <div class="x_content">
                            <form id="form-search" class="form-horizontal">
                                <div class="col-xs-12 col-sm-12">
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label">Start Date :</label>
                                        <div class="col-xs-8 col-sm-4">
                                            <input type="date" class="form-control" id="start_date" name="start_date"
                                                value="{{ request('start_date', date('Y-m-01')) }}">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label">End Date :</label>
                                        <div class="col-xs-8 col-sm-4">
                                            <input type="date" class="form-control" id="end_date" name="end_date"
                                                value="{{ request('end_date', date('Y-m-d')) }}">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label">Type :</label>
                                        <div class="col-xs-8 col-sm-4">
                                            <select class="form-control" id="type" name="type">
                                                <option value="all" {{ request('type') == 'all' ? 'selected' : '' }}>All Gadai</option>
                                                <option value="Laku Gadai" {{ request('type') == 'Laku Gadai' ? 'selected' : '' }}>SGK</option>
                                                <option value="Gadai Jabar" {{ request('type') == 'Gadai Jabar' ? 'selected' : '' }}>SGJB</option>
                                                <option value="j2c" {{ request('type') == 'j2c' ? 'selected' : '' }}>J2C</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group" style="margin-top:20px">
                                        <label class="col-xs-2 col-sm-2 control-label"></label>
                                        <div class="col-xs-6 col-sm-6">
                                            <button type="submit" class="btn btn-primary btn-search">
                                                <i class="fa fa-search"></i> Search</button>
                                            <button type="button" id="btn-reset" class="btn btn-warning">
                                                <i class= "fa fa-refresh"></i> Reset
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-xs-10 col-sm-10">
                            <div class="x_panel">
                                <div class="x_content">
                                    <table id="table" class="table table-bordered table-striped table-hover">
                                        <thead>
                                            <tr>
                                                <th class="text-center" rowspan="2">Periode Transaksi</th>
                                                <th class="text-center" rowspan="2">Outstanding Awal</th>
                                                <th class="text-center" colspan="2">New Transaction</th>
                                                <th class="text-center" rowspan="2" style="background: #e8f5e9;">Register</th>
                                                <th class="text-center" rowspan="2">Repayment</th>
                                                <th class="text-center" rowspan="2">Resell</th>
                                                <th class="text-center" rowspan="2">Oustanding Akhir</th>
                                            </tr>
                                            <tr>
                                                <th class="text-center">Gadai Baru</th>
                                                <th class="text-center">Gadai Ulang</th>
                                            </tr>
                                        </thead>
                                        
                                        @foreach ($mutasi_pawn as $data)
                                            <tr>
                                                <td class="text-center">{{ $data->periode_transaksi }}</td>
                                                <td class="text-right">{{ number_format($data->PAWN_AWAL) }}
                                                </td>
                                                <td class="text-right" style="cursor: pointer;"
                                                    onclick="detailStock('{{ $data->periode_transaksi }}', 'pawn_new')">
                                                    <strong>{{ number_format($data->PAWN_NEW) }}</strong>
                                                </td>
                                                <td class="text-right" style="cursor: pointer;"
                                                    onclick="detailStock('{{ $data->periode_transaksi }}', 'pawn_reapplication')">
                                                    <strong>{{ number_format($data->PAWN_REAPPLICATION) }}</strong>
                                                </td>

                                                <td class="text-right" style="background: #e8f5e9;">
                                                    <strong>{{ number_format($data->PAWN_REGISTER) }}</strong>
                                                </td>

                                                <td class="text-right" style="cursor: pointer;"
                                                onclick="detailStock('{{ $data->periode_transaksi }}', 'pawn_done')">
                                                    <strong>{{ number_format($data->PAWN_DONE) }}</strong>
                                                </td>
                                                <td class="text-right" style="cursor: pointer;"
                                                    onclick="detailStock('{{ $data->periode_transaksi }}', 'pawn_resell')">
                                                    <strong>{{ number_format($data->PAWN_RESELL) }}</strong>
                                                </td>
                                                <td class="text-right">{{ number_format($data->PAWN_OUTSTANDING) }}</td>
                                            </tr>
                                        @endforeach
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="rekap_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" style="width: 80%;" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="rekap_lakusimpan"><i class="fa fa-cubes"></i> Mutasi Pawn <b>(<span
                                id="item_name">XXX</span>)</b> <a id="download-excel" href="#" style="float: right;">
                        </a></h5>
                </div>

                <div>
                    <div class="x_panel">
                        <div class="x_content" id="rekap_detail_lakusimpan">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function detailStock(periode, tipe) {
            let start_date, end_date;
            let today = new Date();
            let currentYear = today.getFullYear();
            let currentMonth = (today.getMonth() + 1).toString().padStart(2, "0");
            let currentDate = today.getDate().toString().padStart(2, "0");
            let type_pawn = $("#type").val();
            
            if (periode) {
                let parts = periode.split("-");
                let year = parts[0];
                let month = parts[1].padStart(2, "0");

                start_date = `${year}-${month}-01 00:00:00`;

                if (year == currentYear && month == currentMonth) {
                    start_date = `${year}-${month}-01 00:00:00`;
                    end_date = $('#end_date').val() + " 23:59:59";
                } else {
                    let lastDay = new Date(year, month, 0).getDate();
                    end_date = `${year}-${month}-${lastDay} 23:59:59`;
                }
            } else {
                start_date = `${year}-${month}-01 00:00:00`;
                end_date = $('#end_date').val() + " 23:59:59";
            }

            console.log("Start Date:", start_date);
            console.log("End Date:", end_date);
            console.log("End Date:", type_pawn);

            $('#cover-spin').show();
            $.ajax({
                url: "{{ url('rekap_pawn_detail') }}",
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    'start_date': start_date,
                    'end_date': end_date,
                    'periode': periode,
                    'tipe': tipe,
                    'type_pawn': type_pawn
                },
                success: function(response) {
                    $('#rekap_detail_lakusimpan').html(response);
                    $('#item_name').html(periode);
                    $('#rekap_modal').modal('show');
                    $('#cover-spin').hide();
                },
                error: function(response) {
                    var response = response.responseJSON;
                    alert(response.error);
                    $('#cover-spin').hide();
                }
            });
        }
    </script>

@endsection