@extends('master')

@section('css')
    <!-- daterange picker -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/daterangepicker/daterangepicker.css') }}">
    <!-- iCheck for checkboxes and radio inputs -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">
    <!-- Tempusdominus Bootstrap 4 -->
    <link rel="stylesheet"
        href="{{ asset('assets/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css') }}">
@endsection

@section('contant')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">Payment Forms</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('payments.index') }}">Payment Forms</a></li>
                            <li class="breadcrumb-item active">Edit</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card card-primary">
                            <div class="card-header">
                                <h3 class="card-title">Payment Form</h3>
                            </div>
                            <!-- /.card-header -->
                            <!-- form start -->
                            <form action="{{ route('payments.update', ['id' => $form->id]) }}" method="POST">@csrf
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label for="form_number">Form Number</label>
                                                <input type="text" class="form-control" id="form_number"
                                                    name="form_number" value="{{ old('form_number', $form->form_number) }}"
                                                    placeholder="Enter Form Number">
                                                @error('form_number')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label for="added_date">Date</label>

                                                <div class="input-group date" id="added_date" data-target-input="nearest">
                                                    <input type="text" class="form-control datetimepicker-input"
                                                        data-target="#added_date" id="added_date" name="added_date"
                                                        value="{{ old('added_date', $form->added_date) }}"
                                                        placeholder="Enter Date" />
                                                    <div class="input-group-append" data-target="#added_date"
                                                        data-toggle="datetimepicker">
                                                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                                    </div>
                                                    @error('added_date')
                                                        <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="name">Name</label>
                                        <input type="text" class="form-control" id="name" name="name"
                                            value="{{ old('name', $form->name) }}" placeholder="Enter Category Name">
                                        @error('name')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <label for="price">Mobile Number</label>
                                        <input type="number" min="0" class="form-control" id="mobile_number"
                                            name="mobile_number" value="{{ old('mobile_number', $form->mobile_number) }}"
                                            placeholder="Enter Mobile Number">
                                        @error('mobile_number')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <label for="address">Address</label>
                                        <textarea class="form-control" name="address" id="address" cols="30" rows="5">{{ old('address', $form->address) }}</textarea>
                                        @error('address')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-3">
                                            <div class="form-group ">
                                                <label for="is_paid">Paid</label><br>
                                                <input type="checkbox" name="is_paid" id="is_paid" value="1"
                                                    {{ old('is_paid', $form->is_paid) == 1 ? 'checked' : '' }}
                                                    data-bootstrap-switch data-off-color="danger" data-on-color="success"
                                                    data-on-text="Paid" data-off-text="Unpaid">
                                                @error('is_paid')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                        {{-- <div class="col-lg-3">
                                            <div class="form-group">
                                                <label for="is_delivered">Delivered</label><br>
                                                <input type="checkbox" name="is_delivered" id="is_delivered"
                                                    value="1"
                                                    {{ old('is_delivered', $form->is_delivered) == 1 ? 'checked' : '' }}
                                                    data-bootstrap-switch data-off-color="danger" data-on-color="success"
                                                    data-on-text="Delivered" data-off-text="Pending">
                                                @error('is_delivered')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div> --}}
                                    </div>
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="card-title">Order Items</h3>
                                        </div>
                                        <!-- /.card-header -->
                                        <div class="card-body table-responsive p-0">
                                            <table class="table table-hover text-nowrap">
                                                <thead>
                                                    <tr>
                                                        <th>Sweet</th>
                                                        <th>Price</th>
                                                        <th>Package</th>
                                                        <th>Quantity</th>
                                                        <th>Total</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($form->formItems as $formItem)
                                                        <input type="hidden"
                                                            name="categories[{{ $formItem->category_id }}][id]"
                                                            value="{{ $formItem->category_id }}">
                                                        <tr>
                                                            <td>{{ $formItem->category->name }}</td>
                                                            <td>₹ {{ $formItem->category->price }}</td>
                                                            <td>500 GM</td>
                                                            <td>
                                                                <input type="number" class="form-control quantity"
                                                                    name="categories[{{ $formItem->category_id }}][quantity]"
                                                                    id="quantity_{{ $formItem->category_id }}"
                                                                    value="{{ $formItem->quantity }}" min="0"
                                                                    data-id="{{ $formItem->category_id }}"
                                                                    data-price="{{ (float) $formItem->category->price }}">
                                                                @error('categories[][id]')
                                                                    <span class="text-danger">{{ $message }}</span>
                                                                @enderror
                                                            </td>
                                                            <td><input type="text" readonly class="form-control"
                                                                    name="categories[{{ $formItem->category_id }}][total]"
                                                                    value="{{ $formItem->total }}" style="width: 90px;"
                                                                    id="total_{{ $formItem->category_id }}"></td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                        <!-- /.card-body -->
                                    </div>

                                    <div class="form-group">
                                        <label for="remark">Remark</label>
                                        <textarea class="form-control" name="remark" id="remark" cols="30" rows="5">{{ old('remark', $form->remark) }}</textarea>
                                        @error('remark')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <a href="{{ route('payments.index') }}" class="btn btn-dark me-2">Back</a>
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </div>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
@endsection

@section('js')
    <!-- InputMask -->
    <script src="{{ asset('assets/plugins/moment/moment.min.js') }}"></script>
    <!-- date-range-picker -->
    <script src="{{ asset('assets/plugins/daterangepicker/daterangepicker.js') }}"></script>
    <!-- Tempusdominus Bootstrap 4 -->
    <script src="{{ asset('assets/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js') }}"></script>
    <!-- Bootstrap Switch -->
    <script src="{{ asset('assets/plugins/bootstrap-switch/js/bootstrap-switch.min.js') }}"></script>
    <script>
        $('#added_date').datetimepicker({
            format: 'DD-MM-yyyy',
        });

        $("input[data-bootstrap-switch]").each(function() {
            $(this).bootstrapSwitch('state', $(this).prop('checked'));
        })

        $('.quantity').on('keyup', function() {
            var id = $(this).data('id');
            var price = $(this).data('price');
            var quantity = $(this).val();
            var total = price * quantity;
            $('#total_' + id).val(total);
        });
    </script>
@endsection