@extends('layouts.app')

@section('title', 'Add Translation')

{{-- custom css --}}
@push('css')
@endpush

@section('content')

<x-content-body>

    <x-breadcrumbs :breadcrumbs="$breadcrumbs" />

    <x-row-card>
        <x-slot:title>
            <h4 class="card-title">Add New Transaction</h4>
        </x-slot:title>

        <x-form id="add-transaction-form">

            <div class="row">

                <!-- Transaction Name -->
                <div class="col-md-6 mb-3">
                    <x-input-label for="transactionName" :value="__('Transaction Name')" />
                    <input type="text" class="form-control form-control-sm" id="transactionName" name="transaction_name"
                        placeholder="Enter transaction name">
                </div>

                <!-- Associated contat  -->
                <div class="col-md-6 mb-3">
                    <label for="associatedLead" class="form-label">Associated Lead</label>
                    <select class="form-select" name="contact_id" id="">
                        <option selected value="">Choose Option</option>
                        @forelse ($contacts as $contact)
                        <option value="{{ $contact['id'] }}"> {{ $contact['f_name'] }} {{ $contact['l_name'] }}</option>
                        @empty
                        <option selected value=""> Contact  Not Found</option>
                        @endforelse
                    </select>
                </div>

                <!-- Transaction Owner -->
                <div class="col-md-6 mb-3">
                    <label for="transactionOwner" class="form-label">Transaction Owner</label>
                    <select class="form-select" name="user_id" id="">
                        <option selected value="">Choose User</option>
                        @forelse ($users as $user)
                        <option value="{{ $user['id'] }}"> {{ $user['f_name']." ".$user['m_name']."".$user['l_name']  }}</option>
                        @empty
                        <option selected value=""> User Not Found </option>
                        @endforelse
                    </select>
                </div>

                <!-- Transaction Type -->
                <div class="col-md-6 mb-3">
                    <label for="transactionType" class="form-label">Transaction Type</label>
                    <select class="form-select" id="" name="transaction_type">
                        <option value="" selected>Select transaction type</option>
                        <option value="sale">Sale</option>
                        <option value="purchase">Purchase</option>
                        <option value="lease">Lease</option>
                    </select>
                </div>

                <!-- Transaction Stage -->
                <div class="col-md-6  mb-3">
                    <label for="transactionStage" class="form-label">Transaction Stage</label>
                    <select class="form-select" id="" name="transaction_stage">
                        <option value="" selected>Select transaction stage</option>
                        <option value="initiated">Pre Listing</option>
                        <option value="in-progress">Listing</option>
                        <option value="pending">Pending</option>
                        <option value="close">Close</option>
                        <option value="expire">Expired / withdran</option>
                    </select>
                </div>

                <div class="offset-3 col-md-3 ">
                    <button type="submit" class="btn btn-primary btn-sm submit mt-3">Save Transaction</button>
                </div>

            </div>

            </div>
        </x-form>
    </x-row-card>
</x-content-body>
@endsection


{{-- custom js --}}
@push('js')

<script>
    let transactionStoreRoute = @json(route('transactions.store'));
    let showAllTransactionRoute = @json(route('transactions.index'));
</script>
<script src="{{ asset('assets/js/custom/transaction.js') }}"></script>
@endpush