@extends('layout.dashboard_layout')

@section('content')
    <div class="pw-container">

        {{-- Flash Messages --}}
        @if (session('success'))
            <div class="pw-alert pw-alert-success">
                <i class="bi bi-check-circle-fill"></i>
                {{ session('success') }}
            </div>
        @endif

        @if (session('error'))
            <div class="pw-alert pw-alert-danger">
                <i class="bi bi-x-circle-fill"></i>
                {{ session('error') }}
            </div>
        @endif



        {{-- Header --}}
        <div class="pw-header">
            <div class="pw-header-left">
                <h4>Riwayat Semprot</h4>
                <p>Daftar riwayat kegiatan penyemprotan lapangan</p>
            </div>
            <div class="pw-header-right">

                <button type="button" class="pw-btn pw-btn-success" data-bs-toggle="modal" data-bs-target="#exportModal">
                    <i class="bi bi-download"></i> Export
                </button>

            </div>
        </div>

        {{-- Table --}}
        <div class="pw-card">

            <div style="overflow-x:auto">

                <table id="sprayingTable" class="table w-100">

                    <thead>
                        <tr>
                            <th width="50">No</th>
                            <th>Tanggal</th>
                            <th>Jenis Semprot</th>
                            <th>Blok</th>
                            <th>Penyemprot</th>
                            <th>Status</th>
                            <th width="120" class="text-center">Aksi</th>
                        </tr>
                    </thead>

                    <tbody>

                        @foreach ($sprayings as $spraying)
                            <tr>

                                <td></td>

                                {{-- Tanggal --}}
                                <td data-order="{{ $spraying->spray_datetime->timestamp }}">
                                    <span class="pw-badge badge-code">
                                        {{ $spraying->spray_datetime->format('d/m/Y H:i') }}
                                    </span>
                                </td>

                                {{-- Jenis --}}
                                <td>
                                    <span class="pw-badge badge-job">
                                        {{ str_replace('_', ' ', $spraying->jenis_semprot) }}
                                    </span>
                                </td>

                                {{-- Blok --}}
                                <td>
                                    <div class="td-name-wrap">

                                        <span class="td-avatar">
                                            {{ strtoupper(substr($spraying->block->block_name, 0, 2)) }}
                                        </span>

                                        <span class="td-name">
                                            {{ $spraying->block->afd }}
                                            -
                                            {{ $spraying->block->block_name }}
                                        </span>

                                    </div>
                                </td>

                                {{-- Penyemprot --}}
                                <td>
                                    <span class="pw-badge badge-afd">
                                        {{ $spraying->workers->count() }} Orang
                                    </span>
                                </td>

                                {{-- Status --}}
                                <td>

                                    @if ($spraying->status == 'pending')
                                        <span class="pw-badge bg-warning text-white">
                                            Pending
                                        </span>
                                    @elseif($spraying->status == 'waiting_verification')
                                        <span class="pw-badge bg-info text-white">
                                            Menunggu
                                        </span>
                                    @else
                                        <span class="pw-badge bg-success text-white">
                                            Verified
                                        </span>
                                    @endif

                                </td>

                                {{-- Aksi --}}

                                <td>
                                    <div class="td-actions">
                                        <button class="pw-btn pw-btn-primary btn-sm" data-bs-toggle="modal"
                                            data-bs-target="#detail{{ $spraying->id }}">
                                            <i class="bi bi-eye me-1"></i>
                                            Detail
                                        </button>
                                    </div>

                                </td>
                            </tr>
                            {{-- Modal Detail --}}

                            <div class="modal fade" id="detail{{ $spraying->id }}" tabindex="-1">
                                <div class="modal-dialog modal-lg modal-dialog-scrollable">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">
                                                Detail Riwayat Semprot
                                            </h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal">
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="row">
                                                <div class="col-md-6 mb-3">
                                                    <label class="pw-label">
                                                        Tanggal
                                                    </label>
                                                    <div class="pw-detail-box">
                                                        {{ $spraying->spray_datetime->format('d M Y H:i') }}
                                                    </div>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label class="pw-label">
                                                        Jenis Semprot
                                                    </label>
                                                    <div class="pw-detail-box">
                                                        {{ str_replace('_', ' ', $spraying->jenis_semprot) }}
                                                    </div>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label class="pw-label">
                                                        Blok
                                                    </label>
                                                    <div class="pw-detail-box">
                                                        {{ $spraying->block->afd }}
                                                        -
                                                        {{ $spraying->block->block_name }}
                                                    </div>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label class="pw-label">
                                                        Baris
                                                    </label>
                                                    <div class="pw-detail-box">
                                                        {{ $spraying->baris }}
                                                    </div>
                                                </div>
                                                <div class="col-md-12 mb-3">
                                                    <label class="pw-label">
                                                        Penyemprot
                                                    </label>
                                                    <div class="pw-detail-box">
                                                        @foreach ($spraying->workers as $worker)
                                                            <span class="pw-badge badge-afd">
                                                                {{ $worker->nama_pekerja }}
                                                            </span>
                                                        @endforeach
                                                    </div>
                                                </div>
                                                <div class="col-md-12 mb-3">
                                                    <label class="pw-label">
                                                        Foto
                                                    </label>
                                                    <div class="row">
                                                        @foreach ($spraying->photos as $photo)
                                                            <div class="col-md-3 mb-2">
                                                                <img src="{{ asset('storage/' . $photo->photo_path) }}"
                                                                    class="img-fluid rounded">
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                                @if ($spraying->verification)
                                                    <hr>
                                                    <h6 class="mb-3">
                                                        Hasil Verifikasi
                                                    </h6>
                                                    <div class="col-md-4">
                                                        <label class="pw-label">
                                                            Total Pokok
                                                        </label>
                                                        <div class="pw-detail-box">
                                                            {{ $spraying->verification->total_pokok }}
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <label class="pw-label">
                                                            Tidak Mati
                                                        </label>
                                                        <div class="pw-detail-box">
                                                            {{ $spraying->verification->total_tidak_mati }}
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <label class="pw-label">
                                                            Mati
                                                        </label>
                                                        <div class="pw-detail-box">
                                                            {{ $spraying->verification->total_mati }}
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection


@push('scripts')
    <script>
        $(document).ready(function() {

            let table = $('#sprayingTable').DataTable({

                processing: true,
                responsive: true,
                autoWidth: false,
                pageLength: 10,

                lengthMenu: [10, 25, 50, 100],

                language: {
                    lengthMenu: "Tampilkan _MENU_ data",
                    search: "",
                    searchPlaceholder: "Cari jenis semprot, blok, status...",
                    info: "Menampilkan _START_–_END_ dari _TOTAL_ data",
                    infoEmpty: "Tidak ada data",
                    zeroRecords: "Data tidak ditemukan",
                    paginate: {
                        previous: "‹",
                        next: "›"
                    }
                },

                columnDefs: [{
                    targets: 0,
                    searchable: false,
                    orderable: false
                }],

                order: [
                    [1, 'desc']
                ],

                dom: '<"pw-toolbar"lf>' +
                    't' +
                    '<"pw-footer"ip>'

            });


            table.on('draw.dt', function() {

                let info = table.page.info();

                table.column(
                    0, {
                        page: 'current'
                    }
                ).nodes().each(function(cell, i) {

                    cell.innerHTML = i + 1 + info.start;

                });

            }).draw();

        });
    </script>

    <style>
        .pw-detail-box {
            padding: 10px;
            border-radius: 10px;
            border: 1px solid #E5E7EB;
            background: #F9FAFB;
        }

        .modal-content {
            border-radius: 15px;
        }
    </style>
@endpush
{{-- MODAL EXPORT --}}
<div class="modal fade" id="exportModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            <form action="{{ route('sprayings.export') }}" method="GET">

                <div class="modal-header">
                    <h5 class="modal-title">
                        Export Data Semprot
                    </h5>

                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    <div class="mb-3">

                        <label class="form-label">
                            Pilih Periode Bulan
                        </label>

                        <input type="month" name="month" class="form-control" required>

                    </div>

                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        Batal
                    </button>

                    <button type="submit" class="btn btn-success">
                        <i class="bi bi-download"></i>
                        Export
                    </button>

                </div>

            </form>

        </div>

    </div>
</div>