@extends('layouts.app')

@section('content')
<style>
    .page-wrap { max-width: 1400px; }
    .topbar {
        align-items: center;
        display: flex;
        gap: 10px;
        justify-content: space-between;
        margin-bottom: 12px;
    }
    .page-title {
        color: #1E4FA8;
        font-size: 24px;
        font-weight: 900;
    }
    .btn {
        background: #1E4FA8;
        border: 1px solid #1E4FA8;
        border-radius: 8px;
        color: #fff;
        cursor: pointer;
        display: inline-block;
        font-weight: 800;
        padding: 9px 13px;
        text-decoration: none;
        white-space: nowrap;
    }
    .btn-light {
        background: #eef4ff;
        border-color: #d8e4ff;
        color: #1E4FA8;
    }
    .btn-green {
        background: #15803d;
        border-color: #15803d;
    }
    .card {
        background: #fff;
        border: 1px solid #e4ebf3;
        border-radius: 8px;
        box-shadow: 0 4px 14px rgba(0,0,0,.05);
        margin-bottom: 14px;
        padding: 14px;
    }
    .filter-row {
        align-items: end;
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(5, minmax(140px, 1fr));
    }
    .form-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    label {
        color: #334155;
        font-size: 13px;
        font-weight: 900;
    }
    .form-control {
        border: 1px solid #d8e1ec;
        border-radius: 8px;
        box-sizing: border-box;
        font-size: 14px;
        min-height: 40px;
        padding: 8px 10px;
        width: 100%;
    }
    .table-wrap { overflow-x: auto; }
    table {
        border-collapse: collapse;
        min-width: 900px;
        width: 100%;
    }
    th, td {
        border-bottom: 1px solid #edf1f6;
        font-size: 13px;
        padding: 9px 8px;
        text-align: left;
    }
    th {
        background: #f5f7fb;
        color: #263445;
        font-weight: 900;
    }
    .status {
        border-radius: 999px;
        display: inline-block;
        font-size: 12px;
        font-weight: 900;
        padding: 4px 10px;
    }
    .status-open { background: #dcfce7; color: #166534; }
    .status-closed { background: #e2e8f0; color: #334155; }
    .custom-date-field { display: none; }
    @media(max-width: 900px) {
        .topbar { align-items: stretch; flex-direction: column; }
        .filter-row { grid-template-columns: 1fr; }
    }
</style>

<div class="page-wrap">
    <div class="topbar">
        <div class="page-title">Opening and Closing Stock Report</div>
        <a class="btn btn-light" href="{{ url('/inventory') }}">Inventory</a>
    </div>

    <div class="card">
        <form method="GET" action="{{ url('/inventory/opening-closing-stock') }}" class="filter-row auto-filter-form">
            <div class="form-group">
                <label>Search</label>
                <input class="form-control" type="text" name="search" value="{{ $filters['search'] ?? '' }}" placeholder="Shift no, user, branch">
            </div>
            <div class="form-group">
                <label>Status</label>
                <select class="form-control" name="status">
                    <option value="">All statuses</option>
                    <option value="open" {{ ($filters['status'] ?? '') === 'open' ? 'selected' : '' }}>Open</option>
                    <option value="closed" {{ ($filters['status'] ?? '') === 'closed' ? 'selected' : '' }}>Closed</option>
                </select>
            </div>
            <div class="form-group">
                <label>User</label>
                <select class="form-control" name="user_id">
                    <option value="">All users</option>
                    @foreach($users as $user)
                        <option value="{{ $user->id }}" {{ ($filters['user_id'] ?? '') == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label>Branch</label>
                <select class="form-control" name="branch_id">
                    <option value="">All branches</option>
                    @foreach($branches as $branch)
                        <option value="{{ $branch->id }}" {{ ($filters['branch_id'] ?? '') == $branch->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label>Date Range</label>
                <select class="form-control" name="date_range" id="dateRange">
                    <option value="today" {{ ($filters['date_range'] ?? 'today') === 'today' ? 'selected' : '' }}>Today</option>
                    <option value="yesterday" {{ ($filters['date_range'] ?? '') === 'yesterday' ? 'selected' : '' }}>Yesterday</option>
                    <option value="this_month" {{ ($filters['date_range'] ?? '') === 'this_month' ? 'selected' : '' }}>This Month</option>
                    <option value="last_month" {{ ($filters['date_range'] ?? '') === 'last_month' ? 'selected' : '' }}>Last Month</option>
                    <option value="custom" {{ ($filters['date_range'] ?? '') === 'custom' ? 'selected' : '' }}>Custom Date</option>
                    <option value="all" {{ ($filters['date_range'] ?? '') === 'all' ? 'selected' : '' }}>All</option>
                </select>
            </div>
            <div class="form-group custom-date-field">
                <label>From</label>
                <input class="form-control" type="datetime-local" name="custom_from" value="{{ $filters['custom_from'] ?? '' }}">
            </div>
            <div class="form-group custom-date-field">
                <label>To</label>
                <input class="form-control" type="datetime-local" name="custom_to" value="{{ $filters['custom_to'] ?? '' }}">
            </div>
            <button class="btn" type="submit">Filter</button>
            <a class="btn btn-light" href="{{ url('/inventory/opening-closing-stock') }}">Reset</a>
        </form>
    </div>

    <div class="card table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Shift No</th>
                    <th>User</th>
                    <th>Branch</th>
                    <th>Status</th>
                    <th>Opened</th>
                    <th>Closed</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @forelse($shifts as $shift)
                    <tr>
                        <td><strong>{{ $shift->shift_no }}</strong></td>
                        <td>{{ $shift->user?->name ?: '-' }}</td>
                        <td>{{ $shift->branch?->name ?: '-' }}</td>
                        <td><span class="status status-{{ $shift->status }}">{{ ucfirst($shift->status) }}</span></td>
                        <td>{{ $shift->opened_at?->format('Y-m-d H:i') }}</td>
                        <td>{{ $shift->closed_at?->format('Y-m-d H:i') ?: '-' }}</td>
                        <td><a class="btn btn-green" href="{{ url('/inventory/opening-closing-stock/'.$shift->id) }}">View Report</a></td>
                    </tr>
                @empty
                    <tr><td colspan="7">No shifts found.</td></tr>
                @endforelse
            </tbody>
        </table>

        <div style="margin-top:12px;">
            {{ $shifts->links('vendor.pagination.jevapos') }}
        </div>
    </div>
</div>

<script>
const dateRange = document.getElementById('dateRange');

function toggleCustomDates() {
    const show = dateRange.value === 'custom';
    document.querySelectorAll('.custom-date-field').forEach(field => {
        field.style.display = show ? 'flex' : 'none';
    });
}

document.querySelectorAll('.auto-filter-form select').forEach(field => {
    field.addEventListener('change', () => field.form.requestSubmit());
});

dateRange.addEventListener('change', toggleCustomDates);
toggleCustomDates();
</script>
@endsection