@extends('layouts.main')

@section('title', 'Edit Monthly Profit')

@section('content')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

<div class="main-content app-content">
    <div class="container-fluid">

        <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb mb-4">
            <div>
                <h1 class="page-title text-primary">Edit Monthly Profit</h1>
            </div>
            <div class="ms-auto">
                <a href="{{ route('monthly-profits.index') }}" class="btn btn-secondary">Back</a>
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-body">
                <form action="{{ route('monthly-profits.update', $profit->id) }}" method="POST" id="profitForm">
                    @csrf
                    @method('PUT')

                    <div class="row">

                        <!-- Branch -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Branch *</label>
                            <select name="branch_id" class="form-select" required>
                                @foreach($branches as $branch)
                                    <option value="{{ $branch->id }}" {{ $profit->branch_id == $branch->id ? 'selected' : '' }}>
                                        {{ $branch->branch_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Month -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Financial Month *</label>
                            <input type="month" name="financial_month"
                                class="form-control"
                                value="{{ \Carbon\Carbon::parse($profit->financial_month)->format('Y-m') }}"
                                required>
                        </div>

                        <!-- Profit -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Net Profit *</label>
                            <input type="number" step="0.01" name="net_profit_amount"
                                class="form-control"
                                value="{{ $profit->net_profit_amount }}" required>
                        </div>

                        <!-- Lock -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Lock Record</label>
                            <select name="is_locked" class="form-select">
                                <option value="0" {{ !$profit->is_locked ? 'selected' : '' }}>No</option>
                                <option value="1" {{ $profit->is_locked ? 'selected' : '' }}>Yes</option>
                            </select>
                        </div>

                        <!-- Notes -->
                        <div class="col-12 mb-3">
                            <label class="form-label">Notes</label>
                            <textarea name="notes" class="form-control">{{ $profit->notes }}</textarea>
                        </div>

                    </div>

                    <div class="text-end">
                        <button type="submit" class="btn btn-primary" id="submitBtn">
                            Update
                        </button>
                    </div>

                </form>
            </div>
        </div>

    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script>
$('#profitForm').on('submit', function() {
    $('#submitBtn').prop('disabled', true)
        .html('<span class="spinner-border spinner-border-sm"></span> Updating...');
});
</script>

@endsection